实例详解jQuery表单验证插件validate
validate插件是⼀个基于jquery的表单验证插件了⾥⾯有许多的常⽤的⼀些验证⽅法我们可以直接调⽤，具体的我们⼀起来看看。
例⼦，html代码
<!DOCTYPE html>
<html lang="en">
<head>
<include file="Common/Header" />
<meta charset="utf-8">
<script src="/jquery.min.js"></script>
</head>
<body>
<form class="form-horizontal" id="form" onsubmit="return false;">
<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,
}
},基于vue的webapp读书系统
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 false;
}
//---------------------------------
if(!v.form())return false;
$.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 常见类型的验证代码
下载地址
enabled是开启吗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: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",在线编程网站有哪些
number: "Please enter a valid number.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please 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/false之外，还可以使⽤表达式或者函数，⽐如
$("#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
jquery下载文件插件$().ready(function() {
$.metadata.setType("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("userName", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "⽤户名只能包括中⽂字、英⽂字母、数字和下划线");
//然后就可以使⽤这个规则了
$("#form1").validate({
// 验证规则
rules: {
userName: {
required: true,
userName: true,
rangelength: [5,10]
}
},
/* 设置错误信息 */
messages: {
userName: {
required: "请填写⽤户名",
rangelength: "⽤户名必须在5-10个字符之间"
}
},
});
7:
radio、checkbox、select的验证⽅式类似
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>
select的验证
下拉框
<span>
<select id="selectbox" name="selectbox" class="{required:true}">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
8:
Ajax验证

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。