0

我正在使用jQuery Validation Plugin，我正在添加自己的方法，如下所示：

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

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

但是，即使我没有将required类添加到表单元素，如果用户没有输入任何内容，仍然会调用此验证方法并评估为 false。但我希望行为是，如果元素没有required类，则仅在用户输入某些内容时才调用它。有没有办法做到这一点？谢谢！

更新

因此，我在上面发布的实际代码是一个简单的示例来演示问题，但是现在我提出了给我带来问题的具体示例。这是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;
    }
}
4

1 回答 1

5

引用操作：

“但是，即使我没有将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它是启用的。如果你进入这个，你会打破它。您只能通过来禁用它，或者通过自定义函数来覆盖它。要保持启用默认选项，只需将其完全保留即可。truefalseonfocusout

2）每个输入元素必须有一个有效的name，并且name="2"是无效的。它不能以数字开头。

3)如果要验证任何隐藏字段，该ignore选项必须设置为ignore: []and not ignore: ""。否则，请忽略此选项，默认情况下会忽略隐藏字段。请参阅： https ://stackoverflow.com/a/8565769/594235

4)我不明白value=""在每个元素上指定的意义。value如果您不使用它，只需忽略该属性。

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

 if (test) return false;
 return true;

...您可以更简单地写一行：（ 就像您编写的那样，return !(test); 我只是添加了将您的特定逻辑!翻转到 。）testreturn false

6) 根据文档，您只需将value、element和 optional传递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/

于 2013-03-15T06:13:46.000 回答