Jquery 验证不起作用，只有电子邮件验证有效

Question

我正在使用jquery validation来验证我网站上的表单。

由于某种原因，电子邮件验证有效。 但是，equalTo 和我的自定义要求不起作用。

我错过了一招吗？

 <form id="form1">
             <input class="input1991 savage" name="name" placeholder="Full Name" type="text" ><br>
             <input class="input1991 savage" name="email" placeholder="Email" type="email"><br>
             <input id="password" class="input1991 savage" name="password" placeholder="Password" type="password"><br>
             <input class="input1991 savage" name="password2" placeholder="Password Verification" type="password"><br>
</form>
$(function(){
        $.validator.addMethod('minChar', function(value, element) {
            return this.option(element)
            value.length >= 6;
        }, 'Please enter more then 6 characters')
        $("#form1").validate({
            rules: {
                email: {
                    required: true,
                    email: true,
                },
                name: {
                    required: true,
                    minChar: true
                },
                password: {
                    required: true,
                    minChar: true
                },
                password2: {
                    required: true,
                    equalTo: "#password",
                    minChar: true
                }
            },
            messages: {
                email: {
                    required: 'Please enter test',
                    email: 'test22'
                }
            }
        });
    });

Answer 1

您的验证方法似乎有问题。

只需使用：

return value.length >= 6;

返回真或假。没有必要在其中使用元素。

$.validator.addMethod('minChar', minChar, 'Please enter more than 6 characters');
function minChar(value, element) {
    return value.length >= 6;
}
$('#form1').validate({
    rules: {
        name: {
            required: true,
            minChar: true
        }
    }
});

测试用例：

Name = jack;   // false
Name = johnny; // true

Answer 2

是

您的自定义规则违反了内置的equalTo规则。此外，jquery.validate 有一个类似于已经实现的minChar的规则。

$('#form1').validate({
  rules: {
    name: {
        required: true,
        minlength: 6
    }
    ...
  }
});

Answer 3

检查 JavaScript 控制台是否有错误可能不是一个坏主意。

您的代码...

$.validator.addMethod('minChar', function(value, element) {
    return this.option(element)
    value.length >= 6;
}, 'Please enter more then 6 characters')

这不是this.option(element)...它this.optional(element)

您还忘记了"或"运算符。 为了澄清起见，我添加了额外的括号...

return ( this.optional(element) || (value.length >= 6) );

完成。。。

$.validator.addMethod('minChar', function(value, element) {
    return this.optional(element) || value.length >= 6;
}, 'Please enter more than 6 characters')

---

话虽如此，您无需为此创建自定义规则。

只需使用minlength方法即可。

$("#form1").validate({
    rules: {
        ....
        name: {
            required: true,
            minlength: 6
        },
        ....