如何创建一个简单的,自定义规则使用jQuery验证插件(使用addMethod),不使用正则表达式?
例如,哪个函数创建的规则只在至少选中一组复选框中的一个时才生效?
如何创建一个简单的,自定义规则使用jQuery验证插件(使用addMethod),不使用正则表达式?
例如,哪个函数创建的规则只在至少选中一组复选框中的一个时才生效?
当前回答
对于这种情况:用户注册表单,用户必须选择一个未采取的用户名。
这意味着我们必须创建一个自定义的验证规则,该规则将向远程服务器发送异步http请求。
在你的html中创建一个input元素:
<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
其他回答
// 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 }
});
步骤1包含cdn like
<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
}
});
}):
});
你可以像这样添加一个自定义规则:
$.validator.addMethod(
'booleanRequired',
function (value, element, requiredValue) {
return value === requiredValue;
},
'Please check your input.'
);
并将其添加为如下规则:
PhoneToggle: {
booleanRequired: 'on'
}
你可以这样创建一个简单的规则:
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");