我如何僅使用vanillaJS驗證電話欄位-有解無憂

我有一個電話欄位要驗證。我嘗試了許多正則運算式修復，但沒有任何效果對我有用。誰可以幫我這個事。我的要求如下。

電話欄位可以包含（僅在號碼前面）
電話欄位可以包含space字符
電話欄位應該只允許數字

我的代碼如下：提前致謝！

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>

uj5u.com熱心網友回復：

我無法理解您正在尋找的確切模式，但我已經根據您的要求在下面實作了一個簡單的片段。這是你想要的？

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>

uj5u.com熱心網友回復：

我真的不知道您對接受哪些電話號碼的確切要求，但您可以看看這是否適合您：

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);

uj5u.com熱心網友回復：

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

轉到https://keycode.info/。從這里你可以得到可以跟蹤 JS Vanilla JS 的鍵碼。您可以使用 if 陳述句來驗證它是否包含在您想要的鍵中。

例如 if (keyCode == 49) // 49 是 1 的關鍵代碼

此外，請確保同時考慮 num 鍵，即 numpan 和 num 行。

我將嘗試使用正確的代碼更新此評論，但同時希望這會有所幫助。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379748.html

標籤：javascript 形式验证

上一篇：如何打開一個新表單然后從第二個表單回傳到第一個表單而不關閉并重新打開第一個表單

下一篇：保護表單定義yaml不被覆寫