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

Question

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

Phone字段可以包含+（只在数字前面）
Phone 字段可以包含 space 个字符
Phone 字段应该只允许数字

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

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

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

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

例如 if (keyCode == 49) // 49 是 1

的键码

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

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

Answer 2

我真的不知道你对 phone 数字的确切要求，但你可以看看这是否不适合你：

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

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

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>

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

How can i validate Telephone field only using vanilla JS

javascript

forms

validation