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

Question

我正在尝试在网页上创建一个表单，其中 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 作为条件，但该字段的输入类型列为电话。也许这就是问题所在？

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

Answer 1

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

这一行缺少一个右括号