Javascript jQuery验证插件-如何创建简单的自定义规则？

如何使用不使用正则表达式的jQuery验证插件（使用）创建简单的自定义规则

---

例如，哪个函数将创建一个仅在选中一组复选框中的至少一个复选框时才进行验证的规则？

您可以通过以下操作创建一个简单的规则：

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

谢谢，它成功了

以下是最终代码：

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

自定义规则和数据属性 您可以使用语法

data rule name=“true”，使用
data
属性创建自定义规则并将其附加到元素

因此，要检查是否至少选中了一组复选框中的一个，请执行以下操作：

数据规则一个或多个已检查

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

您还可以使用语法
data msg rulename=“my new message”
覆盖规则的消息（即：至少必须选择1）

注意

如果使用
数据规则rulename
方法，则需要确保规则名称全部为小写。这是因为jQuery验证函数
dataRules
应用
.toLowerCase（）
进行比较，并且规范不允许使用大写

工作示例


$.validator.addMethod（“oneormorechecked”，函数（值，元素）{
返回$（'input[name=“”+element.name+'”]：选中）。长度>0；
}，“必须至少选择1”）；
$（'.validate'）.validate（）

红色

蓝色

绿色

您可以添加如下自定义规则：

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

PhoneToggle: {
    booleanRequired: 'on'
}        

并将其添加为如下规则：

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

PhoneToggle: {
    booleanRequired: 'on'
}        

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

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

在html中创建输入元素：


声明表单验证规则：
$（“表单”）。验证({
规则：{
“用户名”：{
//在这里，jqueryvalidate将启动一个GET请求，以
///interface/users/用户名有效吗？用户名=
//响应应为“原始文本”，内容仅为“真”或“假”
远程：'/interface/users/用户名有效吗'
},
},

远程代码应类似于：
类接口：：UsersController！User.exists？（：User\u name=>params[：User\u name]）
终止
终止
步骤1包括类似cdn的

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

this.optional（element）| |在该函数中做了什么？似乎每个规则都有这个功能，但我不知道为什么它与除“required”之外的任何规则都相关。省略它意味着该方法将始终被应用，即使该元素不是必需的。我认为this.optional（element）如果元素为null，则返回true？要运行它，“amount”应该是页面中某个元素的id和名称？是的，amount指的是某个输入表单字段的name属性。我尝试了此方法，效果非常好，但是，返回除true以外的消息的人仍然无法验证“ok”，它被卡在“Username已被使用”中，有什么问题吗？我还检查了它是否通过回显值而不是返回false和true来正确返回，这是可行的。在我看来，我的浏览器没有接收到返回false和return true？这让我发疯。通过在addmethod之前插入一个名为result的变量，它开始工作了，似乎是true和false值在成功函数中正确注册请小心。这不是功能完整的代码，因为AJAX“成功”将在“return response；”运行后返回，导致意外的behaviors@Malachi是正确的。这可以通过执行同步调用来解决，但这很糟糕。我想知道是否有其他方法可以实现这一点？正如其他人所建议的，有
remote
，但据我所知，只允许一次验证，因此如果需要进行两次异步验证或根据响应有多条错误消息，则dn不起作用。jquery validate有一个远程方法：addClassRules是答案的一个很好的补充。95 Upvows，我想这意味着文档可能不清楚：PDon不知道您是否仍在搜索（4年后）但是这只能对jquery.validate ver>=1.10有所帮助。我一生中都无法在官方文档中找到这一点，我希望他们能更清楚地说明这一点。谢谢！
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

  $(document).ready(function(){
        $("#submit").click(function () {
              $('#myform').validate({ // initialize the plugin
                rules: {
                    id: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 1
                    }
                },
                messages: {
                    id: {
                        required: "Enter Email Id"

                    },
                    password: {
                        required: "Enter Email Password"

                    }
                },
                submitHandler: function (form) { // for demo
                    alert('valid form submitted'); // for demo
                    return false; // for demo
                }
            });
       }):
  });