jqueryvalidate(jqueryvalidate自定义规则)
如何使用jQuery的validate
一、使用Jquery.Validate进行验证方法
$(document).ready(function () {
$("#pageForm").validate({
rules: {
DictKey: { required: true, maxlength: 10 },
DictContent: { required: true, maxlength: 10 }
},
messages: {
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },
DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }
},
submitHandler: function (form) {
form.submit();
}
})
})
DictKey ，DictContent：指需要验证的控件ID
submitHandler ：指通过验证后运行的函数，里面写入表单要提交的函数，否则表单不会提交
二、列出常用默认验证规则
(1)required:true 必输字段
(2)email:true 必须输入正确格式的电子邮件
(3)url:true 必须输入正确格式的网址
(4)date:true 必须输入正确格式的日期
(5)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(6)number:true 必须输入合法的数字(负数，小数)
(7)digits:true 必须输入整数
(8)creditcard: 必须输入合法的信用卡号
(9)equalTo:"#field" 输入值必须和#field相同
(10)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(12)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(14) equalLength:10 输入长度必须是10
(14)range:[5,10] 输入值必须介于 5 和 10 之间
(15)max:5 输入值不能大于5
(16)min:10 输入值不能小于10
三、使用ajax方法验证输入值是否存在
当文本框输入值时，或改变输入值时会自动到Server去验证输入值是否在数据库中存在
JS代码如下：
DictKey: { required: true, maxlength: 10,
remote: { //验证用户名是否存在
type: "POST",
url: '@Url.Content("~/Account/Test/")' //servlet
}
},
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},
Server端：
[HttpPost]
public JsonResult Test(string DictKey) //DictKey即要验证控件的ID值
{
bool result;
if (DictKey == "a")
{
result = true;
}
else
{
result = false;
}
return Json(result);
}
根据Server端返回的True,False来决定验证是否通过
四、非submit按钮结合Jquery.Form进行提交
如果不是submit提交按钮，比如单击某个按钮触发表单验证，这时表单验证可用如下方式
function validateForm() {
//validate方法参数可选
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
form.submit()
//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
}
}
jquery.validate验证样式怎么用css控制
首先，jquery.validate是一个验证表单的方法，它主要的功能是为表单提供简单的表单提交的验证方法，比如必填项的提示、密码是否一致、邮箱格式等等；
基本的CSS样式的变化，即在style/style中根据id或者class来写格式控制；
表单验证中自带的一些css格式可以在谷歌浏览器中的开发模式中找到其对应的id或者class来修改，该图中验证提示词的id=cname-error；
对id=cname-error改变css，效果为第一行；注意到有一个.error的存在，它是对所有报错的样式进行控制；改完后color样式可能不能改成功，不妨在你的color后加一个！important。
如果不怕麻烦，可以去改导入的jquery.vliadate.js文件。
jquery validate 怎么验证单选框
1、下载并导入js
script src="jquery.js" type="text/javascript"/script
script src="jquery.validate.js" type="text/javascript"/script
script src="jquery.metadata.js" type="text/javascript"/script
2、初始化参数
$.validator.setDefaults( {
//验证成功后回调参数对象
submitHandler: function() {/ /回调方法
document.forms[0].submit(); //验证通过后提交
}
} );
$.metadata.setType("attr", "validate");
//单选框、复选框，用validate设置
//详细见单选复选例子
$("form").validate({//绑定需要验证的form表单
//自定义参数对象
errorPlacement: function(error, element) {//设置错误提示消息位置，可选
error.appendTo($(element).parents("td")[0]);
}
} );
3、设定错误信息样式
style type="text/css"
label.error {
color:red;
display:block
}
/style
注意，样式名固定为
label.error，样式内容可修改。
4、表单元素绑定验证
绑定方法：
class=”XXX”或xxx=”XXX”,
例如
input name="email" class="email"/
jquery validate 自定义验证怎么用
你自己设置验证规则，然后把验证规则放在一个函数里面，添加一个自定义验证方法名就行了。例如：
jQuery.validator.addMethod("idCardValidate", function(value, element) {
return this.optional(element) || idCardValidate(value);
}, "请正确输入您的身份证号码");
“idCardValidate”这就是jquery validate自定义验证的方法名；
idCardValidate(value)这个就是你验证规定的函数，函数返回true或者false
jquery validate 自定义验证 怎么用
jquery validate自定义验证需要实现以下方法：
jQuery.validator.addMethod("验证名", function(value, element) {验证规则}
回调方法自带的两个参数分别为对应控件的value值和该控件的dom元素。
具体实现参考下面的例子：
//检测手机号是否正确??
jQuery.validator.addMethod("isMobile",?function(value,?element)?{?
????var?length?=?value.length;??
????var?regPhone?=?/^1([3578]\d|4[57])\d{8}$/;??
????return?this.optional(element)?||?(?length?==?11??regPhone.test(?value?)?);????
},?"请正确填写您的手机号码");
自定义验证规则的使用和默认规则是一样的：
rules:{
????????????name:{
????????????????required:true,
????????????????minlength:2,
????????????????maxlength:10
????????????},
????????????tel:{
????????????????required:true,
????????????????minlength:7,
????????????????maxlength:11,
????????????????isMobile:true
????????????}
}