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

Question

使用jQuery Validate插件（使用addMethod），如何创建一个简单的自定义规则，而不使用正则表达式？

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

- Edward

---

95个赞，我猜这意味着http://bassistance.de/jquery-plugins/jquery-plugin-validation/的文档可能不太清楚:P - Simon Arnold

不知道你是否仍在寻找（四年后），但这可能会有所帮助http://learn.jquery.com/plugins/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DPlugins%2FAuthoring%26redirect%3Dno - Ron van der Heijden

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

- Mark Spangler

---

这个函数中的 this.optional(element) || 是什么意思？似乎每个规则都有这个，但除了“required”规则外，我无法确定它对其他规则有何影响。 - machineghost

如果省略它，就意味着该方法会始终被应用，即使元素并非必需。 - Mark Spangler

我理解这个代码中的 this.optional(element) 如果 element 为 null，会返回 true？ - tnunamak

要使其运行，“amount”应该是页面中某个元素的ID和名称吗？ - Hoàng Long

是的，"amount"指的是某个输入表单字段的名称属性。 - Mark Spangler

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

- Tracy

---

通过在addmethod之前插入一个名为result的变量，我成功让它工作了。看起来true和false值在success函数中得到了正确的注册。 - Mikelangelo

@Mikelangelo 我遇到了同样的问题，请帮帮我，即使 jquery.validate 返回 true，也会显示错误。 - Mohan Ram

请注意这个问题。这段代码不完全可用，因为 AJAX 的“success”会在运行 'return response;' 后返回，导致出现意外的行为。请小心处理。 - Malachi

@Malachi是正确的。这可以通过进行同步调用来修复，但那很糟糕。我想知道是否有其他方法可以实现这一点？正如其他人建议的那样，有remote，但据我所知，它只允许一个验证，因此如果您需要进行两个异步验证或根据响应具有几个错误消息，则无法工作。 - Adam Bergmark

有一个适用于jQuery验证的远程方法：http://jqueryvalidation.org/remote-method/ - TecHunter

Answer 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 }    
});

- commonpike

---

addClassRules是答案中的一个不错的补充。 - Four

不清楚的文档链接: 规则 和 错误消息。 - mangupt

Answer 4

自定义规则和数据属性

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

因此，要检查一组复选框中是否至少有一个被选中：

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="我的新消息" 重写规则(即：至少选择一个)的消息。

注意：

如果您使用 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>

- BenG

---

仅适用于jquery.validate版本>=1.10 - Pavel Nazarov

我真的找不到官方文档中关于这个的内容，希望他们能更清晰地表述。谢谢！ - Josh Mc

不清晰的文档链接：规则 和 错误消息。 - mangupt

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

- edward

Answer 6

你可以像这样添加自定义规则：

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

并将其添加为如下规则：

PhoneToggle: {
    booleanRequired: 'on'
}        

- Bogdan Mates

Answer 7

针对这个案例：用户注册表单，用户必须选择一个未被使用的用户名。

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

1. 在您的 HTML 中创建一个输入元素：

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

声明表单验证规则：

在IT技术中，表单验证是非常重要的一环。你需要声明表单验证规则来确保用户输入的数据符合预期。

  $("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

- Siwei

Answer 8

第一步：包含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>

步骤2 像编程一样

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

- Devang Hire

---

海关规定在哪里？ - undefined