如何格式化phoneNumber?

时间:2018-07-12 19:11:59

标签: javascript html phone-number verification libphonenumber

所以我想创建一个类似于WhatsApp的数字验证输入

expl :将有两个输入字段(一个用于 countryCode ,一个用于 nationalNumber )。输入您的电话号码时,应立即检查phoneNumber,如果该号码i 是有效的手机号码,则应采用正确的格式( like ):

+495334344 --> +49 | 153 34 5334344
while "+49" is the country code and "153 34 5334344" is the national number

image

我已经用libphonenumber.js做过一些实验,但是到目前为止,这段代码是我所得到的。那么如何继续设置数字格式并一方面用countryCode填写另一方面又用国家编号填充输入字段?

任何帮助将不胜感激。预先感谢。

let updateCountryCode = function() {
  let input = $("#countryCode");
  input.val() == '+' ? 
    input.val('') : 
    input.val('+' + input.val().replace(/[^0-9]/g,'').replace(/(\..*)\./g, '$1')); 
  input.val() == '+' ? input.val('') : '';  
  validateNumber()
}


let updateNumber = function() {
  let input = $("#phoneNumber");
  input.val().length > 15 ? input.val(input.val().slice(0, 15)) : ''; 
  validateNumber()
}


let validateNumber = function() {
  let phoneNumber = $("#countryCode").val() + $("#phoneNumber").val()
  
  let isValid = libphonenumber.isValidNumber(phoneNumber) === true;
  if (isValid) {
    console.log(phoneNumber)
    // how to format number and get _formatted_ countryCode & nationalNumber to input both of them into the input fields again?
  }
}



/**/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/libphonenumber-js/bundle/libphonenumber-js.min.js"></script>

<input maxlength="4" oninput="updateCountryCode()" type="tel" placeholder="+49" id="countryCode"/>
<input oninput="updateNumber()" type="tel" placeholder="your phonenumber" id="phoneNumber"/>

0 个答案:

没有答案