js正则表达式注册页面表单验证
Posted olivia-xia
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js正则表达式注册页面表单验证相关的知识，希望对你有一定的参考价值。
可以这样校验
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>表单验证类Validator v1</title> 5 <style> 6 body,td{font:normal 12px Verdana;color:#333333} 7 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff} 8 table{border-collapse:collapse;} 9 td{padding:3px} 10 input{height:20;} 11 textarea{width:80%;height:50px;overflow:auto;} 12 form{display:inline} 13 </style> 14 </head> 15 <body> 16 <table align="center"> 17 <form name="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,2)"> 18 <tr> 19 <td>身份证号：</td> 20 <td><input name="Card" dataType="IdCard" msg="身份证号错误"></td> 21 </tr> 22 <tr> 23 <td>真实姓名：</td> 24 <td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td> 25 </tr> 26 <tr> 27 <td>ID：</td> 28 <td><input name="username" dataType="Username" msg="ID名不符合规定"></td> 29 </tr> 30 <tr> 31 <td>英文名：</td> 32 <td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td> 33 </tr> 34 <tr> 35 <td>主页：</td> 36 <td><input name="Homepage" require="false" dataType="Url" msg="非法的Url"></td> 37 </tr> 38 <tr> 39 <td>密码：</td> 40 <td><input name="Password" dataType="SafeString" msg="密码不符合安全规则" type="password"></td> 41 </tr> 42 <tr> 43 <td>重复：</td> 44 <td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td> 45 </tr> 46 <tr> 47 <td>信箱：</td> 48 <td><input name="Email" dataType="Email" msg="信箱格式不正确"></td> 49 </tr> 50 <tr> 51 <td>信箱：</td> 52 <td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td> 53 </tr> 54 <tr> 55 <td>QQ：</td> 56 <td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td> 57 </tr> 58 <tr> 59 <td>身份证：</td> 60 <td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td> 61 </tr> 62 <tr> 63 <td>年龄：</td> 64 <td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td> 65 </tr> 66 <tr> 67 <td>年龄1：</td> 68 <td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td> 69 </tr> 70 <tr> 71 <td>电话：</td> 72 <td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td> 73 </tr> 74 <tr> 75 <td>手机：</td> 76 <td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td> 77 </tr> 78 <tr> 79 <td>生日：</td> 80 <td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td> 81 </tr> 82 <tr> 83 <td>邮政编码：</td> 84 <td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td> 85 </tr> 86 <tr> 87 <td>邮政编码：</td> 88 <td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td> 89 </tr> 90 <tr> 91 <td>操作系统：</td> 92 <td><select name="Operation" dataType="Require" msg="未选择所用操作系统" > 93 <option value="">选择您所用的操作系统</option> 94 <option value="Win98">Win98</option> 95 <option value="Win2k">Win2k</option> 96 <option value="WinXP">WinXP</option> 97 </select></td> 98 </tr> 99 <tr> 100 <td>所在省份：</td> 101 <td>广东 102 <input name="Province" value="1" type="radio"> 103 陕西 104 <input name="Province" value="2" type="radio"> 105 浙江 106 <input name="Province" value="3" type="radio"> 107 江西 108 <input name="Province" value="4" type="radio" dataType="Group" msg="必须选定一个省份" ></td> 109 </tr> 110 <tr> 111 <td>爱好：</td> 112 <td>运动 113 <input name="Favorite" value="1" type="checkbox"> 114 上网 115 <input name="Favorite" value="2" type="checkbox"> 116 听音乐 117 <input name="Favorite" value="3" type="checkbox"> 118 看书 119 <input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必须选择2~3种爱好"></td> 120 </tr> 121 <td>自我介绍：</td> 122 <td><textarea name="Description" dataType="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td> 123 </tr> 124 125 <td>自传：</td> 126 <td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td> 127 </tr> 128 129 <tr> 130 <td>相片上传：</td> 131 <td><input name="up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td> 132 </tr> 133 <tr> 134 <td colspan="2"><input name="Submit" type="submit" value="确定提交"> 135 <input onClick="Validator.Validate(document.getElementById(‘demo‘))" value="检验模式1" type="button"> 136 <input onClick="Validator.Validate(document.getElementById(‘demo‘),2)" value="检验模式2" type="button"> 137 <input onClick="Validator.Validate(document.getElementById(‘demo‘),3)" value="检验模式3" type="button"></td> 138 </tr> 139 </form> 140 </table> 141 <script> 142 Validator = { 143 Require : /.+/, 144 Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, 145 Phone : /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/, 146 Mobile : /^((\d2,3)|(\d{3}\-))?13\d{9}$/, 147 Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\‘:+!]*([^<>\"\"])*$/, 148 IdCard : "this.IsIdCard(value)", 149 Currency : /^\d+(\.\d+)?$/, 150 Number : /^\d+$/, 151 Zip : /^[1-9]\d{5}$/, 152 QQ : /^[1-9]\d{4,8}$/, 153 Integer : /^[-\+]?\d+$/, 154 Double : /^[-\+]?\d+(\.\d+)?$/, 155 English : /^[A-Za-z]+$/, 156 Chinese : /^[\u0391-\uFFE5]+$/, 157 Username : /^[a-z]\w{3,}$/i, 158 UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\[email protected]#\$%\^&\*\. 159 \{\}<>\?\\\/\‘\"]*)|.{0,5})$|\s/, 160 IsSafe : function(str){return !this.UnSafe.test(str);}, 161 SafeString : "this.IsSafe(value)", 162 Filter : "this.DoFilter(value, getAttribute(‘accept‘))", 163 Limit : "this.limit(value.length,getAttribute(‘min‘), getAttribute(‘max‘))", 164 LimitB : "this.limit(this.LenB(value), getAttribute(‘min‘), getAttribute(‘max‘))", 165 Date : "this.IsDate(value, getAttribute(‘min‘), getAttribute(‘format‘))", 166 Repeat : "value == document.getElementsByName(getAttribute(‘to‘))[0].value", 167 Range : "getAttribute(‘min‘) < (value|0) && (value|0) < getAttribute(‘max‘)", 168 Compare : "this.compare(value,getAttribute(‘operator‘),getAttribute(‘to‘))", 169 Custom : "this.Exec(value, getAttribute(‘regexp‘))", 170 Group : "this.MustChecked(getAttribute(‘name‘), getAttribute(‘min‘), getAttribute(‘max‘))", 171 ErrorItem : [document.forms[0]], 172 ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"], 173 Validate : function(theForm, mode){ 174 var obj = theForm || event.srcElement; 175 var count = obj.elements.length; 176 this.ErrorMessage.length = 1; 177 this.ErrorItem.length = 1; 178 this.ErrorItem[0] = obj; 179 for(var i=0;i<count;i++){ 180 with(obj.elements[i]){ 181 var _dataType = getAttribute("dataType"); 182 if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue; 183 this.ClearState(obj.elements[i]); 184 if(getAttribute("require") == "false" && value == "") continue; 185 switch(_dataType){ 186 case "IdCard" : 187 case "Date" : 188 case "Repeat" : 189 case "Range" : 190 case "Compare" : 191 case "Custom" : 192 case "Group" : 193 case "Limit" : 194 case "LimitB" : 195 case "SafeString" : 196 case "Filter" : 197 if(!eval(this[_dataType])) { 198 this.AddError(i, getAttribute("msg")); 199 } 200 break; 201 default : 202 if(!this[_dataType].test(value)){ 203 this.AddError(i, getAttribute("msg")); 204 } 205 break; 206 } 207 } 208 } 209 if(this.ErrorMessage.length > 1){ 210 modemode = mode || 1; 211 var errCount = this.ErrorItem.length; 212 switch(mode){ 213 case 2 : 214 for(var i=1;i<errCount;i++) 215 this.ErrorItem[i].style.color = "red"; 216 case 1 : 217 alert(this.ErrorMessage.join("\n")); 218 this.ErrorItem[1].focus(); 219 break; 220 case 3 : 221 for(var i=1;i<errCount;i++){ 222 try{ 223 var span = document.createElement("SPAN"); 224 span.id = "__ErrorMessagePanel"; 225 span.style.color = "red"; 226 this.ErrorItem[i].parentNode.appendChild(span); 227 span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*"); 228 } 229 catch(e){alert(e.description);} 230 } 231 this.ErrorItem[1].focus(); 232 break; 233 default : 234 alert(this.ErrorMessage.join("\n")); 235 break; 236 } 237 return false; 238 } 239 return true; 240 }, 241 limit : function(len,min, max){ 242 minmin = min || 0; 243 maxmax = max || Number.MAX_VALUE; 244 return min <= len && len <= max; 245 }, 246 LenB : function(str){ 247 return str.replace(/[^\x00-\xff]/g,"**").length; 248 }, 249 ClearState : function(elem){ 250 with(elem){ 251 if(style.color == "red") 252 style.color = ""; 253 var lastNode = parentNode.childNodes[parentNode.childNodes.length-1]; 254 if(lastNode.id == "__ErrorMessagePanel") 255 parentNode.removeChild(lastNode); 256 } 257 }, 258 AddError : function(index, str){ 259 this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; 260 this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; 261 }, 262 Exec : function(op, reg){ 263 return new RegExp(reg,"g").test(op); 264 }, 265 compare : function(op1,operator,op2){ 266 switch (operator) { 267 case "NotEqual": 268 return (op1 != op2); 269 case "GreaterThan": 270 return (op1 > op2); 271 case "GreaterThanEqual": 272 return (op1 >= op2); 273 case "LessThan": 274 return (op1 < op2); 275 case "LessThanEqual": 276 return (op1 <= op2); 277 default: 278 return (op1 == op2); 279 } 280 }, 281 MustChecked : function(name, min, max){ 282 var groups = document.getElementsByName(name); 283 var hasChecked = 0; 284 minmin = min || 1; 285 maxmax = max || groups.length; 286 for(var i=groups.length-1;i>=0;i--) 287 if(groups[i].checked) hasChecked++; 288 return min <= hasChecked && hasChecked <= max; 289 }, 290 DoFilter : function(input, filter){ 291 return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input); 292 }, 293 IsIdCard : function(number){ 294 var date, Ai; 295 var verify = "10x98765432"; 296 var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; 297 var area = [‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘北京‘,‘天津‘,‘河北‘,‘山西‘,‘内蒙古‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘辽宁‘,‘吉林‘,‘黑龙江‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘上海‘,‘江苏‘,‘浙江‘,‘安微‘,‘福建‘,‘江西‘,‘山东‘,‘‘,‘‘,‘‘,‘河南‘,‘湖北‘,‘湖南‘,‘广东‘,‘广西‘,‘海南‘,‘‘,‘‘,‘‘,‘重庆‘,‘四川‘,‘贵州‘,‘云南‘,‘西藏‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘陕西‘,‘甘肃‘,‘青海‘,‘宁夏‘,‘新疆‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘台湾‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘香港‘,‘澳门‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘‘,‘国外‘]; 298 var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i); 299 if(re == null) return false; 300 if(re[1] >= area.length || area[re[1]] == "") return false; 301 if(re[2].length == 12){ 302 Ai = number.substr(0, 17); 303 date = [re[9], re[10], re[11]].join("-"); 304 } 305 else{ 306 Ai = number.substr(0, 6) + "19" + number.substr(6); 307 date = ["19" + re[4], re[5], re[6]].join("-"); 308 } 309 if(!this.IsDate(date, "ymd")) return false; 310 var sum = 0; 311 for(var i = 0;i<=16;i++){ 312 sum += Ai.charAt(i) * Wi[i]; 313 } 314 Ai += verify.charAt(sum%11); 315 return (number.length ==15 || number.length == 18 && number == Ai); 316 }, 317 IsDate : function(op, formatString){ 318 formatStringformatString = formatString || "ymd"; 319 var m, year, month, day; 320 switch(formatString){ 321 case "ymd" : 322 m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); 323 if(m == null ) return false; 324 day = m[6]; 325 mmonth = m[5]*1; 326 year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); 327 break; 328 case "dmy" : 329 m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); 330 if(m == null ) return false; 331 day = m[1]; 332 mmonth = m[3]*1; 333 year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); 334 break; 335 default : 336 break; 337 } 338 if(!parseInt(month)) return false; 339 monthmonth = month==0 ?12:month; 340 var date = new Date(year, month-1, day); 341 return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate()); 342 function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} 343 } 344 } 345 </script> 346 </body> 347 </html>
以上是关于js正则表达式注册页面表单验证的主要内容，如果未能解决你的问题，请参考以下文章