Используйте Javascript для проверки 10-значного номера телефона
У меня есть код Javascript, который пытается проверить, что введенный номер телефона действительно состоит из 10 цифр, независимо от формата. Кажется, это не работает.
Я использовал аналогичный код Javascript для проверки записи адреса электронной почты, и это сработало.
Вот HTML и JS для номера телефона:
Телефонный номер
<input type = "text" name = "phone number" id = "phone_number" oninput = "return validate_number()"><br><br>
<script>
var number = document.getElementById("phone_number");
function validateNumber(val) {
var re = /^\d{3}-\d{3}-\d{4}$/;
console.info(re.test(val))
return re.test(val);
}
function validate_number() {
if (validateNumber(number.value.replace(/\D/g,""))) {
document.getElementById("phone_number_valid").style.visibility = "visible";
document.getElementById("phone_number_valid").style.height = "initial";
document.getElementById("phone_number_invalid").style.visibility = "hidden";
document.getElementById("phone_number_invalid").style.height = "0";
} else {
document.getElementById("phone_number_invalid").style.visibility = "visible";
document.getElementById("phone_number_invalid").style.height = "initial";
document.getElementById("phone_number_valid").style.visibility = "hidden";
document.getElementById("phone_number_valid").style.height = "0";
}
</script>
<div id = "phone_number_invalid" class = "error_verify">
<p style = "color:red">Invalid phone number.</p>
</div>
<div id = "phone_number_valid" class = "error_verify">
<p style = "color:green">Valid phone number.</p>
</div>
И вот соответствующий CSS:
.error_verify {
visibility: hidden;
height:0;
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы вызываете validateNumber с вводом, при этом удаляются все нецифровые символы:
if (validateNumber(number.value.replace(/\D/g,""))) {
Итак, ваше регулярное выражение, содержащее тире, определенно не будет соответствовать:
var re = /^\d{3}-\d{3}-\d{4}$/;
Поскольку вас вообще не волнует формат, похоже, все, что вам нужно проверить, это то, что в номере телефона ровно 10 цифр. Либо измените регулярное выражение на 10 цифр:
var re = /^\d{10}$/;
Или, что еще проще, просто проверьте, равно ли количество цифровых символов 10:
if (number.value.match(/\d/g).length === 10)) {
const numInput = document.getElementById("phone_number");
const validDiv = document.querySelector('#phone_number_valid');
const invalidDiv = document.querySelector('#phone_number_invalid');
function validate_number() {
if ((numInput.value.match(/\d/g) || []).length === 10) {
validDiv.style.visibility = "visible";
validDiv.style.height = "initial";
invalidDiv.style.visibility = "hidden";
invalidDiv.style.height = "0";
} else {
invalidDiv.style.visibility = "visible";
invalidDiv.style.height = "initial";
validDiv.style.visibility = "hidden";
validDiv.style.height = "0";
}
}<input type = "text" name = "phone number" id = "phone_number" oninput = "return validate_number()"><br><br>
<div id = "phone_number_invalid" class = "error_verify">
<p style = "color:red">Invalid phone number.</p>
</div>
<div id = "phone_number_valid" class = "error_verify">
<p style = "color:green">Valid phone number.</p>
</div>Действительно, регулярное выражение ^\d{3}-\d{3}-\d{4}$ противоречит «У меня есть код Javascript, который пытается проверить, действительно ли введенный номер телефона состоит из 10 цифр, независимо от формата».
@LuvTomar Нажмите «Выполнить фрагмент кода», чтобы просмотреть живую демонстрацию в самом ответе — похоже, он работает нормально. Если проблема в том, что во входных данных может не быть что-либо, вы можете чередовать с пустым массивом, чтобы получить значение по умолчанию .length, равное 0.
Несколько раз появляется следующее сообщение об ошибке: Неверный номер телефона. Действительный номер телефона. { "message": "Uncaught TypeError: невозможно прочитать свойство "длина" равное null", "filename": "stacksnippets.net/js", "lineno": 24, "colno": 34 }
@LuvTomar Как я только что сказал, если проблема в том, что во входных данных может ничего не быть, вы можете чередовать с пустым массивом, чтобы получить значение по умолчанию .length, равное 0. К сожалению, глобальное регулярное выражение, когда совпадений нет, возвращает null скорее чем пустой массив, поэтому вам придется делать это вручную
Вы можете использовать ответ выше, но установить значение по умолчанию на ваш ввод в качестве базы. Таким образом вы покажете своим пользователям, как должен выглядеть их ввод, а также устраните проблему с пустым массивом.
Поэтому, используя ответ CertainPerformance, просто измените эту часть:
<input type = "text" name = "phone number" id = "phone_number" oninput = "return validate_number()"><br><br>
выглядеть так:
<input type = "text" name = "phone number" id = "phone_number" oninput = "return validate_number()" value = "1234567890"><br><br>
Пожалуйста, отредактируйте свой вопрос и удалите часть электронной почты, поскольку она не имеет отношения к проблеме.