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

如何使用不使用正则表达式的jQuery Validate插件（使用addMethod）创建简单的自定义规则？例如，什么函数将创建仅在至少一个条件下进行验证的规则一组复选框是否已选中？

95个投票，我想这意味着bassistance.de/jquery-plugins/jquery-plugin-validation文档可能不清楚：P

不知道您是否仍在搜索（4年后），但这可能对learn.jquery.com/plugins/…有帮助。

#1 楼

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

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”的内容来验证您的复选框。

这是什么。optional（element）||在做那个功能？似乎每条规则都有它，但是我无法说出为什么它与除“必需”之外的任何规则都相关。

–machineghost
09年4月24日在22:15

省略它意味着即使不需要该元素，也将始终应用该方法。

– Mark Spangler
09年4月27日在16:34

我认为，如果element为null，则this.optional（element）返回true？

–tnunamak
2011年1月2日，18：40

为了使其运行，“金额”应该是页面中某些元素的ID和名称吗？

–Hoàng Long
2011年2月9日在10:41

是的，数量是指某些输入表单字段的名称属性。

– Mark Spangler
2011-2-10在19:15

#2 楼

$(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"
            }
        }
    });
});

我尝试了这种方法，它的效果很好，但是，返回真正的其他味精的人仍然无法验证“确定”，它停留在“用户名已被占用”中，这可能是什么问题？我还检查了它是通过回显值而不是返回false和true来正确返回的，并且这种方法有效。在我看来，我的浏览器没有在返回false，返回true吗？这让我发疯..

–麦克兰基洛
2010年5月25日15:33

通过在addmethod之前插入一个称为result的变量来使其工作，似乎在成功函数中正确注册了true，false值

–麦克兰基洛
2010年5月27日在9:19

请注意这一点。这不是功能齐全的代码，因为AJAX“成功”将在“返回响应”之后返回；运行，导致意外行为

–玛拉基
2012年4月21日在11:29

@Malachi是正确的。可以通过执行同步调用来解决此问题，但这很讨厌。我想知道是否还有其他方法可以实现这一目标？正如其他人建议的那样，有一个远程解决方案，但据我所知，它仅允许一个验证，因此如果您需要两次异步验证或根据响应有几个错误消息，它将无法正常工作。

–亚当·伯格马克
13年3月19日在17:57

有一个用于jquery验证的远程方法：jqueryvalidation.org/remote-method

–TecHunter
2014-09-22 8:23

#3 楼

// 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是答案的不错补充。

–四
2011年5月10日18:51

@commonpike这正是我一直在寻找的东西，非常感谢。

–辛巴
18/12/26在10:41

#4 楼

自定义规则和数据属性

您可以创建自定义规则，并使用语法data

使用data-rule-rulename="true";属性将其附加到元素上，以便检查是否至少有一个选中一组复选框：

data-rule-oneormorechecked

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

addMethod

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

还可以使用语法data-msg-rulename="my new message"覆盖规则消息（即必须选择Atleast 1）。

注意

如果使用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 ver> = 1.10

–帕维尔·纳扎罗夫（Pavel Nazarov）
17年11月16日在8:42

我一生都无法在官方文档中找到此内容，希望他们将其弄清楚。谢谢！

–乔什·麦克（Josh Mc）
5月25日0:18

#5 楼

谢谢，它成功了！

这是最终代码：

$.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");

#6 楼

您可以添加这样的自定义规则：

$.validator.addMethod(
    'booleanRequired',
    function (value, element, requiredValue) {
        return value === requiredValue;
    },
    'Please check your input.'
);

，并将其添加为这样的规则：

PhoneToggle: {
    booleanRequired: 'on'
}

#7 楼

对于这种情况：用户注册表单，用户必须选择一个未使用的用户名。

这意味着我们必须创建一个自定义的验证规则，该规则将与远程服务器发送异步http请求。

在html中创建输入元素：

<input name="user_name" type="text" >

声明表单验证规则：

   $("form").validate({
    rules: {
      'user_name': {
        //  here jquery validate will start a GET request, to 
        //  /interface/users/is_username_valid?user_name=<input_value>
        //  the response should be "raw text", with content "true" or "false" only
        remote: '/interface/users/is_username_valid'
      },
    },

远程代码应类似于：

class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end

编程黑洞网