如何验证表单中的电话号码：JavaScript答案

【问题标题】：How to validate phone number in a form: JavaScript如何验证表单中的电话号码：JavaScript
【发布时间】：2020-09-02 14:18:33
【问题描述】：

我正在使用 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>

如果电话号码无效，用户必须无法提交。
非常感谢任何帮助

【问题讨论】：

您可以使用以下链接：- stackoverflow.com/questions/18375929/…
@universedecoder 谢谢，我已经看到了......但我想知道如何在我的表单中实现它，这样它就不会提交。我在哪里添加我的函数调用...请更具体
通常在提交包含文件上传的表单时指定enctype="multipart/form-data"。这里似乎不是这样。

标签： javascript node.js regex

【解决方案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

【讨论】：

@VishruthSubramanian 我创建了一个 jsfiddle 供您以简单的方式查看它的功能，希望对您有所帮助。 jsfiddle.net/khaderhan/5phbg26n/15
@Khader Handal 非常感谢

【解决方案2】：

以下是一段代码 sn-p，用于演示如何使用 onsubmit 处理程序验证表单。通常你会通过调用alert 向用户输出一条消息。但由于这些代码 sn-ps 不支持这一点，因此我使用了对 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>

【讨论】：

这就是我想要的，非常感谢