标签：
jsp中具体实现的代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 9 10 <script src="jquery-2.1.1.js" type="text/javascript"></script> 11 <script src="jquery.validate.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 /*************************************************************************/ 14 //自定义的方法： 15 /* 16 * $.validator.addMethod("af",function(value,element,params) 17 * * af：增加的方法的名称 18 * * function(value,element,params) 19 * * value 元素的值 20 * * element 元素本身 21 * * params 默认值 22 */ 23 $.validator.addMethod("cartlength",function(value,element,params){ 24 //alert(value+" "+element+" "+params); 25 var len = value.length; 26 if(len!=15 && len!=18){ 27 return false; 28 } 29 return true; 30 }); 31 32 /*************************************************************************/ 33 34 //验证15位身份证是否符合要求 35 $.validator.addMethod("cartlength15",function(value,element,params){ 36 var len = value.length; 37 if(len == 15){ 38 var pattern=/^\d{15}$/; 39 if(pattern.test(value)){ 40 return false; 41 } 42 } 43 return true; 44 }); 45 /*************************************************************************/ 46 //验证18位身份证是否符合要求 47 $.validator.addMethod("cartlength18",function(value,element,params){ 48 var len = value.length; 49 if(len == 18){ 50 var pattern=/^\d{18}$/; 51 if(pattern.test(value)){ 52 return false; 53 } 54 } 55 return true; 56 }); 57 //window.onload(); 58 $(document).ready(function() { 59 //调用验证方法 60 $("#exForm").validate({ 61 /*************************************************************************/ 62 //验证规则 63 rules:{ 64 realname:{ //注意：每个字段是dom元素节点的名称name,不是id 65 required:true, 66 maxlength:8, 67 minlength:2 68 }, 69 pwd:{ 70 required:true, 71 minlength:6, 72 maxlength:16 73 }, 74 pwd1:{ 75 required:true, 76 minlength:6, 77 maxlength:16, 78 equalTo:("#pwd") 79 }, 80 gender:{ 81 required:true 82 }, 83 sex:{ 84 required:true, 85 range:[26,50] 86 }, 87 edu:{ 88 required:true 89 }, 90 birthday:{ 91 required:true, 92 date:true 93 }, 94 checkbox1:{ 95 required:true 96 }, 97 email:{ 98 required:true, 99 email:true 100 }, 101 cart:{ 102 required:true, 103 cartlength:"5", 104 cartlength15:"15", //使用自定义的方法验证 105 cartlength18:"18" //使用自定义的方法验证 106 } 107 }, 108 /*************************************************************************/ 109 //显示验证出错的提示信息 110 messages:{ 111 realname:{ 112 required:"您的姓名不能为空", 113 maxlength:"您的姓名长度不大于8位字符", 114 minlength:"您的姓名长度不小于2位字符" 115 }, 116 pwd:{ 117 required:"您输入的密码不能为空", 118 minlength:"您输入的密码不能少于6位", 119 minlength:"您输入的密码不能多于16位" 120 }, 121 pwd1:{ 122 required:"您确认输入的密码不能为空", 123 minlength:"您确认输入的密码不能少于6位", 124 minlength:"您确认输入的密码不能多于16位", 125 equalTo:"您两次输入的密码不一致" 126 }, 127 gender:{ 128 /* 129 * 130 */ 131 }, 132 sex:{ 133 required:"年龄不能为空", 134 range:"年龄介于26到50岁之间" 135 }, 136 edu:{ 137 required:"请选择您的学历" 138 }, 139 birthday:{ 140 required:"出生日期不能为空", 141 date:"出生日期格式不正确" 142 }, 143 checkbox1:{ 144 // required:"" 145 }, 146 email:{ 147 required:"电子邮箱 不能为空", 148 email:"电子邮箱格式不正确" 149 }, 150 cart:{ 151 required:"身份证不能为空", 152 cartlength:"身份证长度只能是15位或者18位", 153 cartlength15:"15位身份证输入有误", 154 cartlength18:"18位身份证输入有误" 155 } 156 } 157 /*************************************************************************/ 158 }); 159 }); 160 161 162 163 </script> 164 </head> 165 <body> 166 <form action="" id="exForm" name="exForm"> 167 <center> 168 <h1>验证信息</h1> 169 <table border="1"> 170 <tr> 171 <td>真实姓名(不能为空)</td> 172 <td><input type="text" id="realname" name="realname"/></td> 173 </tr> 174 <tr> 175 <td>请输入您的密码(密码6-16位)</td> 176 <td><input type="password" id="pwd" name="pwd"></td> 177 </tr> 178 <tr> 179 <td>请确认输入您的密码(密码6-16位)</td> 180 <td><input type="password" id="pwd1" name="pwd1"></td> 181 </tr> 182 <tr> 183 <td align="center" colspan="3"> 184 <input type="radio" id="m" name="gender"/>男 185 <input type="radio" id="f" name="gender"/>女 186 <label style="display: none;" for="gender" class="error">请选择性别</label> 187 </td> 188 </tr> 189 <tr> 190 <td>年龄(26-50)</td> 191 <td><input type="text" id="sex" name="sex"/></td> 192 </tr> 193 <tr> 194 <td>您的学历</td> 195 <td> 196 <select id="edu" name="edu"> 197 <option value="">---请选择您的学历--</option> 198 <option value="a">小学</option> 199 <option value="b">初中</option> 200 <option value="c">高中</option> 201 <option value="d">大学</option> 202 <option value="e">研究生</option> 203 <option value="f">硕士生</option> 204 <option value="g">博士生</option> 205 </select> 206 </td> 207 </tr> 208 <tr> 209 <td>出生日期</td> 210 <td><input type="text" id="birthday" name="birthday"/></td> 211 </tr> 212 <tr> 213 <td>兴趣爱好：</td> 214 <td colspan="2"> 215 <input type="checkbox" name="checkbox1" id="q1"/>乒乓球 216 <input type="checkbox" name="checkbox1" id="q2" value="q2"/>羽毛球 217 <input type="checkbox" name="checkbox1" id="q3" value="q3"/>篮球 218 <input type="checkbox" name="checkbox1" id="q4" value="q4"/>旅游 219 <label style="display: none;" for="checkbox1" class="error">至少选择一个兴趣爱好</label> 220 </td> 221 </tr> 222 <tr> 223 <td>电子邮箱</td> 224 <td><input type="text" id="email" name="email"/></td> 225 </tr> 226 <tr> 227 <td>身份证(必须是15位或者18位)</td> 228 <td><input type="text" id="cart" name="cart"></td> 229 </tr> 230 </table> 231 <input type="submit" value="提交"/> 232 </center> 233 </form> 234 </body> 235 </html>
实现的效果图：
使用jquery.validate.js插件进行表单里控件的验证
标签：
原文地址：http://www.cnblogs.com/0519xf/p/4724504.html
