时间戳

首页 > 解决方案 > 如何使用 Javascript 对 HTML 表单进行错误检查，包括验证字段是否填写正确？

javascript - 如何使用 Javascript 对 HTML 表单进行错误检查，包括验证字段是否填写正确？

问题描述

我正在尝试在 Javascript/Jquery 将对表单执行客户端验证的网页上创建一个表单。我需要它不仅检查必填字段是否已填写，而且是否填写正确（即电话号码的格式为 000-000-0000，电子邮件末尾有一个 @example.com 并输入了两个名称名称字段）。我一直在尝试在线查找示例代码，但我发现的代码大多破坏了我已经拥有的代码。这是表单的一个字段的代码：

HTML：

    <div class="contactForm">
      <label for="phone">Phone: </label>
      <div id="errorphone" class="error"></div>
      <input type="phone" name="phone" id="phone" placeholder="000-000-0000" required>
    </div>

Javascript：

    $("document").ready(function(){
      console.log("Loaded");
      $("#submit").click(function(){
        checkPhone();
      });

    $("#phone").change(function(){
      console.log("Something in phone changed");
      checkPhone();
    });

    function checkPhone(inputtxt){
      var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
      if($.trim($("#phone").val())==""){
        $("#errorphone").html("<p>You missed your phone number</p>");
        $("#errorphone").addClass("showerror");
      }
      else if((inputtxt.value.match(phoneno)==false){
        $("errorphone").html("<p>Please enter your number in the format 000-000-0000</p>");
        $("#errorphone").addClass("showerror");
      }
      else{
        $("#errorphone").html("");
        $("#errorphone").removeClass("showerror");
      }
    }

Javascript用于检查该字段是否为空，但是当我尝试添加代码以验证格式是否正确时，所有Javascript 都停止工作。这是我原来的 checkPhone 函数，在我尝试添加格式验证之前：

    function checkName(){
      if($.trim($("#name").val())==""){
        $("#errorname").html("<p>You missed your name</p>");
        $("#errorname").addClass("showerror");
      }
      else{
        $("#errorname").html("");
        $("#errorname").removeClass("showerror");
      }
    }

我正在使用 Sublime，并且当前 Javascript 中的 else 语句没有正确着色，所以我假设问题可能与语法有关，因为似乎 else 语句不再被识别。但坦率地说，我什至不确定我是否要正确地格式化验证，而且我确信有一种更简单的方法可以完全进行表单验证。我还注意到当前版本的 checkPhone 有 inputtxt 作为条件，但该字段的输入类型被列为电话。也许这就是问题所在？

无论哪种方式，对我正在使用的方法以及如何进行的任何帮助都会很棒。

标签： javascriptjqueryhtmlformsvalidation

解决方案

else if((inputtxt.value.match(phoneno)==false){

这一行缺少一个右括号

推荐阅读