即使不需要,jQuery验证插件添加方法仍在运行

Question

我正在使用jQuery Validation插件,我正在添加自己的方法,如下所示:

jQuery.validator.addMethod("num", function(num) {
    if(isNaN(num))
        return false;

    return true;
}, "Please enter a valid number");

但是,即使我没有将required类添加到表单元素,如果用户没有输入任何内容,仍将调用此验证方法并将其评估为false.但我希望行为是,如果一个元素没有required该类,只有在用户输入了某些内容时才会调用它.反正有没有这样做？谢谢!

UPDATE

所以我上面发布的实际代码是一个简单的示例来演示问题,但是现在我提出了给我提出问题的具体示例.这是jsfiddle链接:

http://jsfiddle.net/SVwmH/2/

HTML

<form method="post">
    <li>
        <label for="2">Mileage</label>
        <input type="text" name="2" id="attr_2" class="non_neg_int"
        value="" />
    </li>
    <li>
        <label for="3">VIN (Vehicle Identification Number)</label>
        <input type="text" name="3"
        id="attr_3" class="vin" maxlength="17" value="" />
    </li>
    <li>
        <input type="submit" />
    </li>
</form>

JS

$(document).ready(function () {
    var validator = $("form").validate({
        onkeyup: false,
        onblur: true,
        ignore: "",
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});

jQuery.validator.addMethod("vin", function (vin) {
    if (!(/^[A-HJ-NP-Z0-9]{17}$/.test(vin))) return false;
    return true;
}, "Must be a valid VIN");

jQuery.validator.addMethod("non_neg_int", function (non_neg_int) {
    if (isNaN(non_neg_int) || non_neg_int == null || non_neg_int == "" || non_neg_int < 0 || !is_int(non_neg_int)) return false;

    return true;
}, "Must be a nonnegative integer");

function is_int(value) {
    if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
        return true;
    } else {
        return false;
    }
}

Answer 1

引用OP:

"但是,即使我没有将required类添加到表单元素中,如果用户没有输入任何内容,仍将调用此验证方法并将其评估为false."

我不能像你描述的那样重现这个问题.

发布时,空字段不会调用您的自定义方法,也不需要该字段.

演示:http: //jsfiddle.net/mJvA8/

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <input type="submit" />
</form>

jQuery:

$(document).ready(function () {

    jQuery.validator.addMethod("num", function (num) {
        if (isNaN(num)) return false;
        return true;
    }, "Please enter a valid number");

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                num: true
            }
        }
    });

});

编辑基于编辑的OP:

我发现您的代码存在以下问题.只有其中一些项目破坏了您的代码.其余的只是一个良好的实践问题.您可以一次测试这些,以便自己查看.

1) 没有这样的选项 onblur.有一个被调用onfocusout,默认情况下已启用.如果你true进入这个,你将打破它.您只能通过false禁用它,或传递自定义功能来覆盖它.要onfocusout启用默认选项,请完全将其保留.

2)每个输入元素必须有效name,并且name="2"无效.它不能以数字开头.

3)如果要验证任何隐藏字段,则ignore必须将选项设置为ignore: []和不设置ignore: "".否则,请保留此选项,默认情况下将忽略隐藏字段.请参阅:https: //stackoverflow.com/a/8565769/594235

4)我不明白指定value=""每个元素的要点.value如果您不使用它,只需省略该属性即可.

5) 而不是写出所有这些......

 if (test) return false;
 return true;

...你可以更简单地写一条短线:( return !(test); 我只是简单地添加了!你的特定test逻辑return false,就像你写的一样.)

6) 按文档,你只能传递value,element以及可选的params进入这样的customMethod功能: .addMethod("myrule", function(value, element, params) { ... }, "message").

这种语法可以减轻任何混淆.此外,使用规则的名称,"non_neg_int"代替单词"value"完全打破了您的non_neg_int自定义方法.

如果您不希望这些规则是"必需的",那么您必须在规则中修复逻辑.例如,该non_neg_int方法正在查找空字段或空字段,因此当字段为空时,它当然会给出错误消息.

在这两个规则上,我只是添加了this.optional(element)哪个规则可选.换句话说,如果将其留空,则规则将不执行任何操作.

return this.optional(element) || !(test);

下面有一个工作演示,您可以根据需要进行调整.

新演示:http://jsfiddle.net/gVVa8/