实例详解jQuery表单验证插件validate
validate插件是⼀个基于jquery的表单验证插件了⾥⾯有许多的常⽤的⼀些验证⽅法我们可以直接调⽤，具体的我们⼀起来看看。
例⼦，html代码
<!DOCTYPE html>
<html lang="en">
<head>
<include file="Common/Header" />
<meta chart="utf-8">
<script src="/jquery.min.js"></script>
</head>
<body>
<form class="form-horizontal" id="form" onsubmit="return fal;">
<input type="text" name="password_old" class="form-control required" id="password_old" maxlength="20">
<input type="password" name="pay_password" class="form-control required" id="pay_password">
<input type="password" name="password_Repeat" class="form-control required" id="password_Repeat">
<button type="submit" id="submit" class="btn btn-success btn-padding-lr-30 margin-right-15">确定</button>
</form>
</body>
<!------------------------------------------------------------------------->
<script src="jquery.validate.min.js"></script>
<script src="messages_cn.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//提交
论语英语$('#submit').click(function(){
var pay_password = $('#pay_password').val();
var password_Repeat = $('#password_Repeat').val();
var password_old = $('#password_old').val();
var data = {
'pay_password':pay_password,
'password_Repeat':password_Repeat,
'password_old':password_old
};
console.info(data);
var v = $('#form').validate({
rules : {
pay_password : {
required : true,
minlength : 6,
ismypassword : true
},
password_Repeat : {
required : true,
minlength : 6,
ismypassword : true
},
password_old : {
required : true,
minlength : 6,
}
},
messages : {
pay_password : {
required : "请输⼊密码",
minlength : "字符长度不能⼩于6个字符",
ismypassword : "密码必须由数字、英⽂字母和特殊字符(!,.@#$%^&*?_~)组成"
},
password_Repeat : {
required : "请输⼊密码",
minlength : "字符长度不能⼩于6个字符",
ismypassword : "密码必须由数字、英⽂字母和特殊字符(!,.@#$%^&*?_~)组成"
},
password_old : {
required : "请输⼊密码",
minlength : "字符长度不能⼩于6个字符",
},
}
});
if(pay_password != password_Repeat){
alert("密码不⼀致，请重新输⼊确认！");return fal;
}
巴米扬大佛//---------------------------------
if(!v.form())return fal;
$.ajax({
url:'{:U("Merchant/ajax_pw")}',
data: data,
beforeSend:function(){
},
success:function(res){
if(res == 1){
alert("密码修改成功");
}
肉末炖蛋的做法
if(res == 0){
alert("两次密码⼀样，未做修改");
}
if(res != 0 && res != 1){
alert(res);
}
}
});
新闺蜜//------------------------
});
})
</script>
</html>
messages_cn.js⽂件如下
required: "必选字段",
remote: "请修正该字段",
email: "请输⼊正确格式的电⼦邮件",
url: "请输⼊合法的⽹址",
date: "请输⼊合法的⽇期",
dateISO: "请输⼊合法的⽇期 (ISO).",
number: "请输⼊合法的数字",
digits: "只能输⼊整数",
creditcard: "请输⼊合法的信⽤卡号",
equalTo: "请再次输⼊相同的值",
高中学习总结accept: "请输⼊拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输⼊⼀个长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输⼊⼀个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输⼊⼀个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输⼊⼀个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输⼊⼀个最⼤为{0} 的值"),
min: jQuery.validator.format("请输⼊⼀个最⼩为{0} 的值")
});
关于validator插件详解
主要分⼏部分
jquery.validate 基本⽤法
jquery.validate API说明
jquery.validate ⾃定义
jquery.validate 常见类型的验证代码
下载地址
jquery.validate插件的⽂档地址
jquery.validate插件的主页
jquery.validate插件主页上提供的demo
验证规则
下⾯是默认校验规则，也可以⾃定义规则
(1)required:true 必输字段
(2)remote:"check.php" 使⽤ajax⽅法调⽤check.php验证输⼊值
(3)email:true 必须输⼊正确格式的电⼦邮件
(4)url:true 必须输⼊正确格式的⽹址
窦娥
(5)date:true 必须输⼊正确格式的⽇期
(6)dateISO:true 必须输⼊正确格式的⽇期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输⼊合法的数字(负数，⼩数)
(8)digits:true 必须输⼊整数
(9)creditcard: 必须输⼊合法的信⽤卡号
(10)equalTo:"#field" 输⼊值必须和#field相同
(11)accept: 输⼊拥有合法后缀名的字符串（上传⽂件的后缀）
(12)maxlength:5 输⼊长度最多是5的字符串(汉字算⼀个字符)
(13)minlength:10 输⼊长度最⼩是10的字符串(汉字算⼀个字符)
(14)rangelength:[5,10] 输⼊长度必须介于 5 和 10 之间的字符串")(汉字算⼀个字符)
(15)range:[5,10] 输⼊值必须介于 5 和 10 之间
(16)max:5 输⼊值不能⼤于5
(17)min:10 输⼊值不能⼩于10
验证提⽰
下⾯是默认的验证提⽰，官⽹有简体中⽂版的验证提⽰下载，或者通过d(ssages⾃定义错误提⽰信息，可以将⽹站的验证提⽰⽂本统⼀到⼀个⽂件⾥。
required: "This field is required.",
remote: "Plea fix this field.",
email: "Plea enter a valid email address.",
url: "Plea enter a valid URL.",
date: "Plea enter a valid date.",
dateISO: "Plea enter a valid date (ISO).",
number: "Plea enter a valid number.",
digits: "Plea enter only digits",
creditcard: "Plea enter a valid credit card number.",
equalTo: "Plea enter the same value again.",
accept: "Plea enter a value with a valid extension.",
maxlength: $.validator.format("Plea enter no more than {0} characters."),
minlength: $.validator.format("Plea enter at least {0} characters."),
rangelength: $.validator.format("Plea enter a value between {0} and {1} characters long."),
range: $.validator.format("Plea enter a value between {0} and {1}."),
max: $.validator.format("Plea enter a value less than or equal to {0}."),
min: $.validator.format("Plea enter a value greater than or equal to {0}.")
使⽤⽅式
1：
在控件中使⽤默认验证规则，例⼦：
电⼦邮件(必填)
<input id="email" class="required email" value="email@" />
竖版名片2：
可以在控件中⾃定义验证规则，例⼦：
⾃定义(必填,[3,5])
<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,
messages:{required:'为什么不输⼊⼀点⽂字呢',minlength:'输⼊的太少了',maxlength:'输⼊那么多⼲嘛'}}" />
3:
通过javascript⾃定义验证规则，下⾯的JS⾃定义了两个规则，password和confirm_password
$().ready(function() {
$("#form2").validate({
rules: {
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
password: {
required: "没有填写密码",
minlength: jQuery.format("密码不能⼩于{0}个字符")
},
confirm_password: {
required: "没有确认密码",
minlength: "确认密码不能⼩于{0}个字符",
equalTo: "两次输⼊密码不⼀致嘛"
}
}
});
});
required除了设置为true/fal之外，还可以使⽤表达式或者函数，⽐如
$("#form2").validate({
rules: {
funcvalidate: {
required: function() {return $("#password").val()!=""; }
}
},
messages: {
funcvalidate: {
required: "有密码的情况下必填"
}
}
});
Html
密码<input id="password" name="password" type="password" />
确认密码<input id="confirm_password" name="confirm_password" type="password" />
条件验证<input id="funcvalidate" name="funcvalidate" value="" />
4：
使⽤meta⾃定义验证信息
⾸先⽤JS设置meta
$("#form3").validate({ meta: "validate" });
Html
email<input class="{validate:{required:true, email:true,
messages:{required:'输⼊email地址', email:'你输⼊的不是有效的邮件地址'}}}"/>
5:
使⽤meta可以将验证规则写在⾃定义的标签内，⽐如validate
JS设置meta
$().ready(function() {
$.metadata.tType("attr", "validate");
$("#form1").validate();
});
Html
Email
<input id="email" name="email"
validate="{required:true, email:true, messages:{required:'输⼊email地址', email:'你输⼊的不是有效的邮件地址'}}" />
6:电脑怎么远程
⾃定义验证规则
对于复杂的验证，可以通过jQuery.validator.addMethod添加⾃定义的验证规则
官⽹提供的additional-methods.js⾥包含⼀些常⽤的验证⽅式，⽐如lettersonly，ziprange，nowhitespace等例⼦
// 字符验证
jQuery.validator.addMethod("urName", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "⽤户名只能包括中⽂字、英⽂字母、数字和下划线");
//然后就可以使⽤这个规则了
$("#form1").validate({
// 验证规则
rules: {
urName: {
required: true,
urName: true,
rangelength: [5,10]
}
},
/* 设置错误信息 */
messages: {
urName: {
required: "请填写⽤户名",
rangelength: "⽤户名必须在5-10个字符之间"
}
},
});
7:
radio、checkbox、lect的验证⽅式类似
radio的验证
性别
<span>
男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />
⼥<input type="radio" id="gender_female" value="f" name="gender" />
</span>
checkbox的验证
最少选择两项
<span>
选项1<input type="checkbox" id="check_1" value="1" name="checkGroup"
class="{required:true,minlength:2, messages:{required:'必须选择',minlength:'⾄少选择2项'}}" /><br />
选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />
</span>
lect的验证
下拉框
<span>
<lect id="lectbox" name="lectbox" class="{required:true}">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</lect>
</span>
8:
Ajax验证
