javascript - jQuery 验证等于

Question

我想使用 jQuery validate() 插件使用 equalTo 来验证签名字段，基本上签名字段必须匹配名字和姓氏字段，这可以使用 validate() 插件吗？

http://jqueryvalidation.org/equalTo-method/向我展示了如何检查它是否等于另一个输入，但它可以像下面这样吗？

等于:字段 1 + 字段 2

反对

等于:field1，

基本上我要问的是我们可以连接 2 个字段并在 validate() 插件中使用它吗？

                    <li>
                        <label>
                            First Name <span class="form-required">*</span>
                        </label>
                        <div>
                            <input type="text" class="form-textbox"  id="first_name" name="first_name" size="20" value="" required/>
                        </div>
                    </li>
                    <li>
                        <label>
                            Family Name <span class="form-required">*</span>
                        </label>
                        <div>
                            <input type="text" class="form-textbox"  id="last_name" name="last_name" size="20" value="" required/>
                        </div>
                    </li>

$("#myForm").validate({

    // Specify the validation rules
    rules: {

        //First Name
        first_name: "required",

        //Family Name
        last_name: "required"
   },

    // Specify the validation error messages
    messages: {

        //First Name
        first_name: "Please enter your first name",

        //Family Name
        last_name: "Please enter your family name"
   },

    submitHandler: function(form) {
        form.submit();
    }
});

});

Answer 1

我已经快速解决了这个问题。虽然这可能不是首选的方式，但效果很好。

• 添加隐藏输入#fullname
• 用空格分隔的名字和姓氏值填充隐藏输入
• 针对隐藏输入验证签名

$("#name1, #name2").on("change", function() {
    $("#fullname").val( $("#name1").val() + " " + $("#name2").val() );
});

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});

$( "#myform" ).validate({
  rules: {
    name1: "required",
    name2: "required",
    signature: {
      equalTo: "#fullname"
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form id="myform">
    <label for="1st name">1st name</label>
    <input id="name1" name="name1" />
    <br/>
    <label for="2 name">2 name</label>
    <input class="left" id="name2" name="name2" />
    <br/>
    <label for="2 name">Signature</label>
    <input class="left" id="signature" name="signature" />
    <input type="hidden" id="fullname" />
    <input type="submit" value="Validate!" />
</form>

编辑:

至于不区分大小写，您必须向验证器添加自定义方法并在添加的方法中进行检查。请看以下内容。

jQuery.validator.addMethod("anotherNotEqualTo", function(value, element, param) {
    return this.optional(element) || value.toLowerCase() === $(param).val().toLowerCase();
},  "Signature must be equal to your name!");

$( "#myform" ).validate({
  rules: {
    name1: "required",
    name2: "required",
    signature: {
        anotherNotEqualTo: "#fullname"
    }
  }
});

这是一个link to the updated fiddle ，以防万一。

希望对您有所帮助。