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

Question

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

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使用来检查字段是否为空，但是当我尝试添加代码以验证格式是否正确时，all 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

基本上，您需要获取元素的值并将其传递给您的验证函数。在事件处理程序中，this 关键字是触发事件的元素。

改变

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

到

 $("#phone").change(function(){
      console.log("Something in phone changed");
      //Pass the value of the element to the function
      checkPhone(this.value);
  });

Answer 2

正如我在 cmets 中所述，我推荐 jquery validation plugin。以下是使用插件验证电话号码的方法。如果您阅读文档，您会看到有很多示例。这是一个演示：https://jsfiddle.net/6gojrte2/

HTML 标记：

    <form id="myform">
        <label for="phone">Phone: </label>      
        <input name="field" placeholder="000-000-0000"><br/>
        <input type="submit" value="Validate!">
    </form>

所需的脚本

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>

$(document).ready(function () {

    $( "#myform" ).validate({
      rules: {
        field: {
          required: true,
          phone: true     
        }
      }
    });

    jQuery.validator.addMethod("phone", function (phone_number, element) {
            phone_number = phone_number.replace(/\s+/g, "");
            return this.optional(element) || phone_number.length > 9 &&  phone_number.match(/^\(?[\d\s]{3}-[\d\s]{3}-[\d\s]{4}$/);
    }, "Invalid phone number");

});
</script>

但是，如果您不想使用该插件，这里是您验证的解决方案。我纠正了一些错误。

<script>

 $("document").ready(function(){

      $("#submit").click(function(){
        checkPhone($('#phone').val());
      });
 });

    $("#phone").keyup(function(){      
      checkPhone($('#phone').val());
    });

    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.match(phoneno))==false || inputtxt.length < 12){          
        $("#errorphone").html("<p>Please enter your number in the format 000-000-0000</p>");
        $("#errorphone").addClass("showerror");
      }
      else{       
        $("#errorphone").html("");
        $("#errorphone").removeClass("showerror");
      }
    }

</script>

Answer 3

<input type="phone" pattern="^\+?\d{0,13}" title="You missed your phone number" name="phone" id="phone" placeholder="000-000-0000" required>

Answer 4

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

这一行缺少一个右括号