如何在表单中验证电话号码：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

下面是一个代码片段，用于演示如何使用处理程序验证表单。通常，您会通过调用 向用户输出一条消息。但是，由于这些代码片段不支持此功能，因此我改用了调用。onsubmitalertconsole.log

我还使用了一种验证技术，允许您使用常规输入字段，该字段将允许用户输入非数字字符并验证位数是否为10，以便用户可以输入例如：[phone]。当然，它仍然适用于只允许数字的字段。

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>

Answer 2

您是否尝试过此代码：

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