如何驗證表單中的電話號碼：JavaScript

Question

我正在使用 NodeJS 和 express 構建一個 web 應用程序。 我有一個在提交時提交 POST 請求的表單。 我如何驗證“電話”輸入，以便電話號碼為 10 位數字。

<form action="/books" method="POST" enctype="multipart/form-data">

   <input class="form-control" type="text" name="user[name]" placeholder="name" required>
   <input class="form-control" type="number" name="user[phone]" placeholder="phone" required>

   <button>Submit</button>

</form>

如果電話號碼無效，則用戶不得提交。
很感謝任何形式的幫助

Answer 1

你試過這段代碼嗎：

function phonenumber(inputtxt) {
  var phoneno = /^\d{10}$/;
  if((inputtxt.value.match(phoneno)) {
      return true;
        } else {
        alert("message");
        return false;
        }
}

上述代碼的全部細節取自W3Resource

這是一個 JSfiddle 頁面，用於示例它應該是什么樣子： https://jsfiddle.net/khaderhan/5phbg26n/15

Answer 2

以下是演示如何使用onsubmit處理程序驗證表單的代碼片段。 通常，您會 output 向用戶發送消息並調用alert 。 但由於這些代碼片段不支持這一點，因此我改用對console.log的調用。

我還使用了一種驗證技術，允許您使用常規輸入字段，允許用戶輸入非數字字符並驗證數字位數是否為 10，以便用戶可以輸入例如：(555)555 -5555。 當然，它仍然適用於只允許數字的字段。

 function validateForm() { let phone = document.f['user[phone]'].value; phone = phone.replace(/\D/g, ''); // get rid of all non-digits if (phone.length == 10) { return true; } //alert('Invalid phone number'); console.log("Invalid phone number."); // alert not supported in code snippet return false; }

 <form name="f" action="/books" method="POST" enctype="multipart/form-data" onsubmit="return validateForm();"> <input class="form-control" type="text" name="user[name]" placeholder="name" required> <input class="form-control" type="number" name="user[phone]" placeholder="phone" required> <button type="submit">Submit</button> </form>