jQuery Validate Plugin - 如何创建一个简单的自定义规则?

IT技术 javascript jquery jquery-validate
2021-01-29 09:27:11

如何使用addMethod不使用正则表达式的 jQuery Validate 插件(使用创建简单的自定义规则

例如,什么函数会创建一个规则,该规则仅在一组复选框中的至少一个被选中时才进行验证?

6个回答

您可以通过执行以下操作来创建一个简单的规则:

jQuery.validator.addMethod("greaterThanZero", function(value, element) {
    return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");

然后像这样应用它:

$('validatorElement').validate({
    rules : {
        amount : { greaterThanZero : true }
    }
});

只需更改“addMethod”的内容即可验证您的复选框。

什么是 this.optional(element) || 在那个函数里做什么?似乎每个规则都有这个,但我不知道为什么它与除“必需”之外的任何规则相关。
2021-03-20 09:27:11
如果 element 为空,我认为 this.optional(element) 返回 true 吗?
2021-03-26 09:27:11
要运行它,“金额”应该是页面中某个元素的 ID 和名称?
2021-03-26 09:27:11
是的,金额是指某些输入表单字段的名称属性。
2021-03-26 09:27:11
省略它意味着将始终应用该方法,即使不需要该元素也是如此。
2021-04-07 09:27:11
$(document).ready(function(){
    var response;
    $.validator.addMethod(
        "uniqueUserName", 
        function(value, element) {
            $.ajax({
                type: "POST",
                url: "http://"+location.host+"/checkUser.php",
                data: "checkUsername="+value,
                dataType:"html",
                success: function(msg)
                {
                    //If username exists, set response to true
                    response = ( msg == 'true' ) ? true : false;
                }
             });
            return response;
        },
        "Username is Already Taken"
    );

    $("#regFormPart1").validate({
        username: {
            required: true,
            minlength: 8,
            uniqueUserName: true
        },
        messages: {
            username: {
                required: "Username is required",
                minlength: "Username must be at least 8 characters",
                uniqueUserName: "This Username is taken already"
            }
        }
    });
});
通过在 addmethod 之前插入一个名为 result 的变量来让它工作,似乎 true 和 false 值在成功函数中正确注册
2021-03-14 09:27:11
jquery 验证有一个远程方法:jqueryvalidation.org/remote-method
2021-03-25 09:27:11
@Malachi 是正确的。这可以通过进行同步调用来解决,但这很糟糕。我想知道是否有其他方法可以实现这一目标?没有remote如其他人建议,但据我可以告诉大家,只允许一个验证,所以它如果你需要两个异步验证或者取决于响应几个错误信息不工作。
2021-03-28 09:27:11
小心这一点。这不是功能齐全的代码,因为 AJAX“成功”将在“返回响应”之后返回;运行,导致意外行为
2021-03-29 09:27:11
我试过这种方法,效果很好,但是,男人返回任何其他消息而不是 true 它仍然无法验证“好的”它被困在“用户名已被使用”中,有什么问题?我还检查了它是否通过回显值正确返回,而不是返回 false 和 true,这有效。在我看来,我的浏览器没有选择返回 false ,返回 true ?这让我发疯..
2021-04-04 09:27:11
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
        return jQuery.validator.methods['date'].call(
            this,value,element
        )||value==("0000/00/00");
    }, "Please enter a valid date."
);

// connect it to a css class
jQuery.validator.addClassRules({
    optdate : { optdate : true }    
});
addClassRules 是对答案的一个很好的补充。
2021-03-22 09:27:11

自定义规则和数据属性

您可以data使用语法创建自定义规则并将其附加到使用属性的元素data-rule-rulename="true";

因此,要检查是否至少选中了一组复选框中的一个:

数据规则一个或多个检查

<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />

添加方法

$.validator.addMethod("oneormorechecked", function(value, element) {
   return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

您还可以使用语法 覆盖规则的消息(即:必须选择至少 1 个)data-msg-rulename="my new message"

笔记

如果使用该data-rule-rulename方法,则需要确保规则名称全部小写。这是因为 jQuery 验证功能dataRules适用.toLowerCase()于比较,而HTML5规范不允许大写。

工作示例

$.validator.addMethod("oneormorechecked", function(value, element) {
  return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

$('.validate').validate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form class="validate">
    red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
    blue<input type="checkbox" name="colours[]" value="blue" /><br/>
    green<input type="checkbox" name="colours[]" value="green" /><br/>
    <input type="submit" value="submit"/>
</form>

仅适用于 jquery.validate 版本 >= 1.10
2021-04-02 09:27:11
我一生都无法在官方文档中找到这一点,我希望他们能更清楚地说明这一点。谢谢!
2021-04-08 09:27:11

谢谢,它奏效了!

这是最终的代码:

$.validator.addMethod("greaterThanZero", function(value, element) {
    var the_list_array = $("#some_form .super_item:checked");
    return the_list_array.length > 0;
}, "* Please check at least one check box");