所以我想创建一个类似于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
我已经用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"/>