jquery表单验证
下载地址和Demo
http://jquery.bassistance.de/validate/jquery.validate.zip 首页： http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery validation 1.7 ---验证插件 需要:jQuery 1.3.2 或 1.4.2版本
1 <script type="text/javascript"> 2 3 $().ready(function() { 4 5 // validate signup form on keyup and submit 6 /* 7 * validate()方法： 8 * * 验证表单，实际上调用就是validate()方法 9 * * validate()方法传入一个json格式数据 10 * * rules：表单验证里的验证规则 11 * * key：对应的是页面中表单的name属性值 12 * * value：对应的验证规则 13 * * required：验证是否为空 14 * * minlength：验证最小长度 15 * * equalTo：对比指定标签的内容是否一致，"#id" 16 * * email：验证email地址是否正确 17 * rules：{ 18 * key:value 19 * }, 20 * * messages：表单验证里的错误提示信息 21 * * key：对应的是页面中表单的name属性值 22 * * value：错误提示信息 23 * 24 * messages:{ 25 * key:value 26 * } 27 */ 28 $("#signupForm").validate({ 29 rules: { 30 firstname: "required", 31 lastname: "required", 32 username: { 33 required: true, //验证规则起作用 34 minlength: 5 35 }, 36 password: { 37 required: true, 38 minlength: 5 39 }, 40 confirm_password: { 41 required: true, 42 minlength: 5, 43 equalTo: "#firstname" 44 }, 45 email: { 46 required: true, 47 email: true 48 }, 49 topic: { 50 required: "#newsletter:checked", 51 minlength: 2 52 }, 53 agree: "required" 54 }, 55 messages: { 56 firstname: "请输入你的姓", 57 lastname: "请输入你的名", 58 username: { 59 required: "请输入用户名", 60 minlength: "最小长度不能少于5个字" 61 }, 62 password: { 63 required: "Please provide a password", 64 minlength: "Your password must be at least 5 characters long" 65 }, 66 confirm_password: { 67 required: "Please provide a password", 68 minlength: "Your password must be at least 5 characters long", 69 equalTo: "Please enter the same password as above" 70 }, 71 email: "Please enter a valid email address", 72 agree: "Please accept our policy" 73 } 74 }); 75 76 }); 77 </script>
表单验证方法
表单验证提示信息
调用jquery.validate({});方法进行验证
$("#empForm").validate({
* //自定义验证规则
* //自定义提示信息
})
自定义验证规则
自定义消息
jquery自定义校验规则
自定义校验规则可以通过自定义检验函数的方式新增加校验规则 步骤如下：
1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示 信息
1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定这个某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示信息
jquery表单验证案例
js部分
1 <script type="text/javascript"> 2 /*********************************************************************************************************/ 3 /* 4 * 自定义验证方法 5 * $.validator.addMethod(name,method,message); 6 * * $.validator.addMethod()是固定写法 7 * * name：添加的方法的名字 8 * * method：一个函数,function(value,element,param){} 9 * * value：对应页面中元素的value属性值 10 * * element：对应页面中的元素 11 * * param：参数 12 * * message：错误提示信息 13 */ 14 $.validator.addMethod("cartLength",function(value,element,param){ 15 var len = value.length; 16 17 if(len!=15&&len!=18){ 18 return false; 19 } 20 21 return true; 22 23 }); 24 25 $.validator.addMethod("cartCheck",function(value,element,param){ 26 var len = value.length; 27 28 var flag; 29 30 if(len==15){ 31 var pattern = /^[0-9]{15}$/; 32 33 flag = pattern.test(value); 34 } 35 36 if(len==18){ 37 var pattern = /^[0-9]{18}|[0-9]{17}x$/; 38 39 flag = pattern.test(value); 40 } 41 42 if(!flag){ 43 return false; 44 } 45 46 return true; 47 48 49 }); 50 51 /*********************************************************************************************************/ 52 53 $().ready(function(){ 54 55 $("#empForm").validate({ 56 rules:{ 57 realname:"required", 58 username:{ 59 required:true, 60 rangelength:[5,8] 61 }, 62 psw:{ 63 required:true, 64 rangelength:[6,12] 65 }, 66 psw2:{ 67 required:true, 68 rangelength:[6,12], 69 equalTo:"#psw" 70 }, 71 gender:"required", 72 age:{ 73 required:true, 74 range:[26,50] 75 }, 76 edu:"required", 77 birthday:{ 78 required:true, 79 dateISO:"yyyy/MM/dd" 80 }, 81 checkbox1:"required", 82 email:{ 83 required:true, 84 email:"true" 85 }, 86 cart:{ 87 required:true, 88 cartLength:true, 89 cartCheck:true 90 } 91 }, 92 messages:{ 93 realname:"真是名称不能为空", 94 username:{ 95 required:"登录名不能为空", 96 rangelength:"登录名的长度应该在5至8之间" 97 }, 98 psw:{ 99 required:"密码不能为空", 100 rangelength:"密码的长度应该在6至12之间" 101 }, 102 psw2:{ 103 required:"密码不能为空", 104 rangelength:"密码的长度应该在6至12之间", 105 equalTo:"两次密码输入不一致" 106 }, 107 gender:"你没有第三种选择", //如果在页面中设置其对应的label标签进行提示，在验证规则的信息提示中可以不设置相关内容 108 age:{ 109 required:"年龄不能为空", 110 range:"年龄必须在26至50之间" 111 }, 112 edu:"至少要选择一个学历", 113 birthday:{ 114 required:"出生日期不能为空", 115 dateISO:"出生日期格式不正确" 116 }, 117 email:{ 118 required:"email不能为空", 119 email:"email地址的格式不正确" 120 }, 121 cart:{ 122 required:"身份证号码不能为空", 123 cartLength:"身份证号码长度不正确", 124 cartCheck:"身份证号码的格式不正确" 125 } 126 } 127 }); 128 129 }); 130 131 132 </script>
HTML部分
1 <p>员工信息录入</p> 2 <form name="empForm" id="empForm" method="post" action="test.html"> 3 <table border=1> 4 <tr> 5 <td>真实姓名(不能为空 ,没有其他要求)</td> 6 <td><input type="text" id="realname" name="realname" /> 7 </td> 8 </tr> 9 <tr> 10 <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td> 11 <td><input type="text" id="username" name="username" /></td> 12 </tr> 13 <tr> 14 <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> 15 <td><input type="password" id="psw" name="psw" style="120px" /></td> 16 </tr> 17 <tr> 18 <td>重复密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> 19 <td><input type="password" id="psw2" name="psw2" style="120px" /></td> 20 </tr> 21 <!-- 22 默认错误提示信息，在放置在页面的表单中第一个控件后面 23 <label style="display: none" for="gender" class="error">请选择性别</label> 24 * for：值对应的是页面表单中name属性的值 25 * class：设置样式，设置"error"样式 26 * style："display: none"，设置成隐藏 27 28 * 在jquery表单验证框架运行时，原理如下： 29 * 首先，表单验证框架会在页面中查找对应的label标签 30 * 在页面中查找对应label标签，错误提示信息就提示页面中label标签内的文本信息 31 * 在页面中没有找到对应label标签，就通过验证框架底层创建一个label标签进行错误信息的提示 32 33 34 errorClass: "error", 35 validClass: "valid", 36 errorElement: "label", 37 38 39 label = $("<" + this.settings.errorElement + "/>") //<label></label> 40 .attr({"for": this.idOrName(element), generated: true})//<label for="gender"></label> 41 .addClass(this.settings.errorClass) //<label for="gender" class="error"></label> 42 .html(message || ""); //<label for="gender" class="error">错误提示信息</label> 43 44 --> 45 <tr> 46 <td>性别(必选其一)</td> 47 <td> 48 <input type="radio" id="gender_male" value="m" name="gender"/>男 49 <input type="radio" id="gender_female" value="f" name="gender"/>女 50 <label style="display: none" for="gender" class="error">请选择性别</label> 51 </td> 52 </tr> 53 <tr> 54 <td>年龄(必填26-50):</td> 55 <td><input type="text" id="age" name="age" /></td> 56 </tr> 57 58 <tr> 59 <td>你的学历:</td> 60 <td> <select name="edu" id="edu"> 61 <option value="">－－请选择你的学历－－</option> 62 <option value="a">专科</option> 63 <option value="b">本科</option> 64 <option value="c">研究生</option> 65 <option value="e">硕士</option> 66 <option value="d">博士</option> 67 </select> 68 </td> 69 </tr> 70 71 <tr> 72 <td>出生日期(1982/09/21):</td> 73 <td><input type="text" id="birthday" name="birthday" style="120px" value="" /></td> 74 </tr> 75 76 <tr> 77 <td>兴趣爱好:</td> 78 <td colspan="2"> 79 <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球 80 <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球 81 <input type="checkbox" name="checkbox1" id="qq3" value="2" />上网 82 <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游 83 <input type="checkbox" name="checkbox1" id="qq5" value="4" />购物 84 <label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label> 85 </td> 86 </tr> 87 <tr> 88 <td align="left">电子邮箱:</td> 89 <td><input type="text" id="email" style="120px" name="email" /></td> 90 </tr> 91 <tr> 92 <td align="left">身份证(15-18):</td> 93 <td><input type="text" id="cart" style="200px" name="cart" /></td> 94 </tr> 95 <tr> 96 <td></td> 97 <td></td> 98 <td><input type="submit" name="firstname" id="firstname" value="保存"></td> 99 </tr> 100 </table> 101 102 </form>