我如何仅使用 vanilla JS 验证电话字段

Question

我有一个电话字段要验证。 我尝试了许多正则表达式修复，但对我没有任何效果。 谁可以帮我这个事。 我的要求如下。

1. 电话字段可以包含+ （仅在数字前面）
2. 电话字段可以包含space字符
3. 电话字段应该只允许数字

我的代码如下：提前致谢！

 function doit() { let phonenumber = document.getElementById('phonenumber'); let phonenumbervalue = phonenumber.value; let spacefilter=/^[\+\d]+(?:[\d-.\s()]*)$/; let allowspace=spacefilter.test(phonenumbervalue); // setting the email field to validate if (phonenumbervalue=='') { phonenumber.nextElementSibling.classList.add('show'); phonenumber.nextElementSibling.nextElementSibling.classList.remove('show'); phonenumber.nextElementSibling.nextElementSibling.nextElementSibling.classList.remove('show'); document.myform.phonenumber.focus(); return false; } else if (allowspace===true) { phonenumber.nextElementSibling.nextElementSibling.nextElementSibling.classList.remove('show'); phonenumber.nextElementSibling.nextElementSibling.classList.remove('show'); phonenumber.nextElementSibling.classList.remove('show'); document.myform.phonenumber.focus(); return false; } else { phonenumber.nextElementSibling.nextElementSibling.nextElementSibling.classList.remove('show'); phonenumber.nextElementSibling.nextElementSibling.classList.remove('show'); phonenumber.nextElementSibling.classList.remove('show'); } }

 body {font-family:arial;} input {width:350px; height:40px; line-height:40px;margin-bottom:10px;text-indent:10px;}.btn-dft {background:#555;color:#fff;font-size:14px;padding:15px;border:none;cursor:pointer;}.validation {transition:all 0.3s linear 0s;position:relative;top:-3px;height:0;overflow:hidden;opacity: 0; color:#FD6F01;font-size: 14px;}.one {transition:all 0.3s linear 0s;position:relative;top:-3px;height:0;overflow:hidden;opacity: 0; color:#FD6F01;font-size: 14px;}.show {height:auto;opacity:1;top:0;margin-bottom: 15px}

 <form name="myform" onsubmit="doit(); return false" novalidate> <div class="input-wrapper"> <input type="text" class='input' name='phonenumber' id="phonenumber" placeholder="Phone Number" /> <div class='validation'>Please enter the Number</div> <div class='validation'>Please enter a Valid Number</div> <div class='validation'>Phone Number required minimum 6 Nos</div> </div> <button type="submit" class='btn-dft'>Submit</button> </form>

Answer 1

我无法理解您正在寻找的确切模式，但我已根据您的要求在下面实现了一个简单的代码段。 这是你想要的？

 function doit() { let phonenumbervalue = document.getElementById('phonenumber').value.replace(/\s/g, ''); const phonePattern = /^\+?\d{6,}$/; if (phonenumbervalue == '') { showError(0); return false; } if (phonenumbervalue.replace(/\+/, '').length < 6) { showError(2); return false; } if (phonePattern.test(phonenumbervalue) == false) { showError(1); return false; } hideError(); alert('ok'); } function hideError() { const currentVisibleError = document.querySelector('.validation.show'); if (currentVisibleError) { currentVisibleError.classList.remove('show'); } } function showError(index) { hideError(); const validationErrors = document.querySelectorAll('.validation'); validationErrors[index].classList.add('show'); document.myform.phonenumber.focus(); }

 body { font-family: arial; } input { width: 350px; height: 40px; line-height: 40px; margin-bottom: 10px; text-indent: 10px; }.btn-dft { background: #555; color: #fff; font-size: 14px; padding: 15px; border: none; cursor: pointer; }.validation { transition: all 0.3s linear 0s; position: relative; top: -3px; height: 0; overflow: hidden; opacity: 0; color: #FD6F01; font-size: 14px; }.one { transition: all 0.3s linear 0s; position: relative; top: -3px; height: 0; overflow: hidden; opacity: 0; color: #FD6F01; font-size: 14px; }.show { height: auto; opacity: 1; top: 0; margin-bottom: 15px }

 <form name="myform" onsubmit="doit(); return false" novalidate> <div class="input-wrapper"> <input type="text" class="input" name="phonenumber" id="phonenumber" placeholder="Phone Number" /> <div class="validation">Please enter the Number</div> <div class="validation">Please enter a Valid Number</div> <div class="validation">Phone Number required minimum 6 Nos</div> </div> <button type="submit" class="btn-dft">Submit</button> </form>

Answer 2

我真的不知道您对接受哪些电话号码的确切要求，但您可以看看这是否不适合您：

function validate(input) {
  if (/^\+?[0-9 ]+$/.test(input)) {
    let matches = input.match(/\d/g);
    if (matches.length === 11 || matches.length === 10) {
      return true;
    }
    return false;
  } else {
    return false;
  }
}

console.log(validate("+1 303 555 5555"));
console.log(validate("1 303 555 5555"));
console.log(validate("303 555 5555"));
console.log(validate("3035555555"));
console.log(validate("+13035555555"));
console.log(validate("3035555555"));

console.log(validate("3+035555555") === false);
console.log(validate("303 d555555") === false);
console.log(validate("303 555 555") === false);
console.log(validate("+1 303 5555 5555") === false);

Answer 3

我没有直接的答案。 但是您可以使用以下方法。

Go 到https://keycode.info/ 。 从这里您可以获取可以跟踪 JS Vanilla JS 的键码。 您可以使用 if 语句来验证它是否包含在您想要的键中。

例如 if (keyCode == 49) // 49 是 1 的键码

此外，请确保同时考虑 num 键，即在 numpan 和 num 行上。

我将尝试使用正确的代码更新此评论，但同时希望这会有所帮助。