关于javascript：jQuery Validate插件 – 如何创建简单的自定义规则？

jQuery Validate Plugin - How to create a simple custom rule?

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

例如，只有在检查了一组复选框中的至少一个复选框时，哪个函数才会创建一个验证规则？

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

1
2
3

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

然后像这样应用：

1
2
3
4
5

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

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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12

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

相关讨论

自定义规则和数据属性

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

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

数据规则oneormorechecked

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

addMethod

1
2
3

$.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规范不允许使用大写。

工作实例

1
2
3
4
5

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

$('.validate').validate();

1
2
3
4
5
6
7
8
9

相关讨论

谢谢，它有效！

这是最终的代码：

1
2
3
4

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

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

1
2
3
4
5
6
7

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

并将其添加为如下规则：

1
2
3

PhoneToggle: {
booleanRequired: 'on'
}

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

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

在你的html中创建一个输入元素：

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

声明您的表单验证规则：

1
2
3
4
5
6
7
8
9

$("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'
},
},

远程代码应该像：

1
2
3
4
5

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