jQueryvalidation插件 – 如何创build一个简单的自定义规则？
如何使用不使用正则expression式的jQuery Validate插件（使用addMethod ）创build简单的自定义规则？
例如，什么函数会创build一个规则，该规则仅在检查一组checkbox中的至less一个时被validation？
你可以通过做这样的事情来创build一个简单的规则：
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”的内容来validation您的checkbox。
$(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" } } }); });
// 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 } });
谢谢，它的工作！
这是最后的代码：
$.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-rulename="true";创build自定义规则并使用data属性将其附加到元素data-rule-rulename="true";
所以要检查是否至less有一组checkbox被选中：
数据规则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"来覆盖规则的消息（即：必须至lessselect1） 。
注意
如果使用data-rule-rulename方法，则需要确保规则名称全部为小写。 这是因为jQueryvalidation函数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>
你可以添加一个像这样的自定义规则：
$.validator.addMethod( "booleanRequired", function (value, element, requiredValue) { return value === requiredValue; }, "Please check your input." );
像这样使用它：
PhoneToggle: { booleanRequired: 'on' }
希望这可以帮助
