jquery-validation 是一款强大的表单验证插件,使用也比较方便,只需导入相应的jquery 文件就可以了,如果想要实现更好的验证效果,可以下载插件后,根据demo 选择合适的效果,并通过查看源代码,导入相应的 文件即可,下面 演示一个简单的表单 验证实例:
先下载相应的插件,然后导入相应的 js文件 和 某个版本的 jquery 文件, 我们 导入 jquery.validate.js
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/validate/jquery.validate.js"></script>
form表单代码 ,jquery-validation 的验证规则是 根据 name 属性来的,所以都要加上name 属性
<form id="inputForm" action="www.baidu.com">
用户名 : <input type="text" name="username" /><br/><br/>
密码 : <input id="pwd" type="text" name="pwd" /><br/><br/>
确认密码 : <input type="text" name="repwd" /><br/><br/>
邮箱 : <input type="text" name="email" /><br/><br/>
身份证号 : <input type="text" name="card" /><br/><br/>
<input type="submit" value="sumbit" />
</form>
<script type="text/javascript">
$(function(){
//自定义拓展表单验证插件规则
// arg1 : 拓展规则名, arg2 :回调函数 (验证时进入,正确 返回 true 错误返回 false) arg3 : 错误信息
//回调函数 : arg1 当前验证的文本框的值
//arg2 当前验证的dom对象 arg3 调用验证规则时的参数
$.validator.addMethod("idCard",function(value,element,params){
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value); //身份证的正则表达式
},"身份证号不合法");
//验证表单 添加验证规则与错误信息 根据 name 属性 来定位 input
$("#inputForm").validate({
rules : {
username : { //不能为空 长度不能小于 6
required : true,
minlength : 6
},
pwd : { //不能为空 只能为数字 长度不能小于 6
required : true,
digits : true,
minlength : 6
},
repwd : {
required : true,
minlength : 6,
equalTo : "#pwd" //判断与某个属性的值是否相等 ,使用 id 查找元素
},
email : {
email : true //判断邮箱格式
},
card : { //添加 拓展的 验证规则
idCard : true
}
},
messages : {
username : {
required : "用户名不能为空",
minlength : "用户名长度不能少于{0}位" //{0} 为 占位符 与 rules 中的值相同
},
pwd : { //不能为空 只能为数字 长度不能小于 6
required : "密码不能为空",
digits : "密码只能为数字",
minlength : "密码长度不能小于{0}位"
},
repwd : {
required :"确认密码不能为空",
minlength : "确认密码长度不能小于{0}位",
equalTo : "两次输入密码不一致" //判断与某个属性的值是否相等 ,使用 id 查找元素
},
email : {
email : "邮箱格式不合法"
}
}
});
});
</script>
也可以为 错误信息定义简单的样式, 错误信息label 标签是 验证错误是,自动生成的,可以查看源代码,查看
<style type="text/css">
label.error {
color : red;
}
</style>
插件的其他提供的验证规则, 有其他需求的,也可按照上面方法 自定义拓展
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.",
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}." )
效果
今天推荐一首歌啊 《给未来的自己》 e1ffc1