JS表单验证-12个常用的JS表单验证
最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~
1. 长度限制
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>1. 长度限制</title> 9 </head> 10 <body> 11 12 <p>1. 长度限制</p> 13 <form name=a onsubmit="return test()"> 14 <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea> 15 <br /> 16 <input type="submit" name="Submit" value="check"> 17 </form> 18 19 <script language="javascript"> 20 function test() 21 { 22 if(document.a.b.value.length>50) 23 { 24 alert("不能超过50个字符！"); 25 document.a.b.focus(); 26 return false; 27 } 28 } 29 </script> 30 31 32 </body> 33 </html>
2. 只能是汉字
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>2. 只能是汉字</title> 9 </head> 10 <body> 11 12 <p>2. 只能是汉字 </p> 13 <input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" /> 14 15 <script language="javascript"> 16 function isChinese(obj){ 17 var reg=/^[\u0391-\uFFE5]+$/; 18 if(obj!=""&&!reg.test(obj)){ 19 alert('必须输入中文！'); 20 obj.value = ""; 21 return false; 22 } 23 } 24 25 </script> 26 </body> 27 </html>
3. 只能是英文字母
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>3. 只能是英文字母</title> 9 </head> 10 <body> 11 12 <p>3.只能是英文字母</p> 13 <input type="text" onblur="checkZm(this.value)" placeholder="只能是字母！" /> 14 15 <script type="text/javascript"> 16 //验证只能是字母 17 function checkZm(zm){ 18 var zmReg=/^[a-zA-Z]*$/; 19 if(zm!=""&&!zmReg.test(zm)){ 20 alert("只能是英文字母！"); 21 zm=""; 22 return false; 23 } 24 } 25 26 </script> 27 </body> 28 </html>
4. 只能是数字
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>4. 只能是数字 </title> 9 </head> 10 <body> 11 12 <p>4. 只能是数字</p> 13 <input type="text" onblur="checkNumber(this.value)" placeholder="只能是数字！" /> 14 15 <script language=javascript> 16 //验证只能为数字 17 function checkNumber(obj){ 18 var reg = /^[0-9]+$/; 19 if(obj!=""&&!reg.test(obj)){ 20 alert('只能输入数字！'); 21 obj = ""; 22 return false; 23 } 24 } 25 26 </script> 27 28 </body> 29 </html>
5. 只能是英文字母和数字
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>5. 只能是英文字母和数字 </title> 9 </head> 10 <body> 11 12 <p>5. 只能是英文字母和数字 </p> 13 <input type="text" onblur="checkZmOrNum(this.value)" placeholder="只能是英文字母和数字 ！" /> 14 15 <script type="text/javascript"> 16 //验证只能是字母和数字 17 function checkZmOrNum(zmnum){ 18 var zmnumReg=/^[0-9a-zA-Z]*$/; 19 if(zmnum!=""&&!zmnumReg.test(zmnum)){ 20 alert("只能输入是字母或者数字,请重新输入"); 21 zmnum=""; 22 return false; 23 } 24 } 25 </script> 26 27 </body> 28 </html>
6. 检验时间大小(与当前时间比较)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>6.检验时间大小(与当前时间比较)</title> 9 </head> 10 <body> 11 12 <p>6.检验时间大小(与当前时间比较)</p> 13 <input type="text" onblur="checkDate(this.value)" placeholder="输入以前的时间！" /> 14 15 <script type="text/javascript"> 16 //检验时间大小(与当前时间比较) 17 function checkDate(obj){ 18 var obj_value=obj.replace(/-/g,"/");//替换字符，变成标准格式(检验格式为：'2009-12-10') 19 // var obj_value=obj.replace("-","/");//替换字符，变成标准格式(检验格式为：'2010-12-10 11:12') 20 var date1=new Date(Date.parse(obj_value)); 21 var date2=new Date();//取今天的日期 22 if(date1>date2){ 23 alert("不能大于当前时间！"); 24 return false; 25 } 26 } 27 </script> 28 29 </body> 30 </html>
7. 屏蔽关键字(这里屏蔽***和****)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>7. 屏蔽关键字(这里屏蔽***和****)</title> 9 </head> 10 <body> 11 12 <p>7. 屏蔽关键字(这里屏蔽***和****)</p> 13 <input type="text" onblur="test(this.value)" placeholder="屏蔽关键字(这里屏蔽***和****)！" /> 14 15 <script type="text/javascript"> 16 function test(obj) { 17 if((obj.indexOf ("***") == 0)||(obj.indexOf ("****") == 0)){ 18 alert("屏蔽关键字(这里屏蔽***和****)！"); 19 return false;} 20 } 21 </script> 22 23 </body> 24 </html>
8. 两次输入密码是否相同
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>8. 两次输入密码是否相同</title> 9 </head> 10 <body> 11 12 <p>8. 两次输入密码是否相同</p> 13 <form> 14 <input type="password" id="input1"> 15 <input type="password" id="input2"> 16 <input type="button" value="确定" onclick="check()"> 17 </form> 18 19 <script type="text/javascript"> 20 function check(){ 21 with(document.all){ 22 if(input1.value!=input2.value) 23 { 24 alert("密码不一致") 25 input1.value = ""; 26 input2.value = ""; 27 } 28 else { 29 alert("密码一致"); 30 document.forms[0].submit(); 31 } 32 } 33 } 34 </script> 35 36 </body> 37 </html>
9.表单项不能为空
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>9 表单项不能为空</title> 9 </head> 10 <body> 11 12 <p></p> 13 <input id="name" type="text" onblur="CheckForm(this.value)" placeholder="请输入名字(不能为空)！" /> 14 15 <script language="javascript"> 16 function CheckForm(obj) 17 { 18 if (obj.length == 0) { 19 alert("姓名不能为空!"); 20 return false; 21 } 22 return true; 23 alert("姓名不能为空!"); 24 } 25 </script> 26 27 </body> 28 </html>
10. 邮箱验证
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>10. 邮箱验证</title> 9 </head> 10 <body> 11 12 <p>10. 邮箱验证</p> 13 <input id="email" type="text" onblur="test(this.value)" value="" placeholder="请输入有效的邮箱！" /> 14 15 <script language="javascript"> 16 function test(obj){ 17 //对电子邮件的验证 18 var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9][email protected]([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 19 if(!myreg.test(obj)) 20 { 21 alert('请输入有效的邮箱！'); 22 myreg.focus(); 23 return false; 24 } 25 } 26 </script> 27 28 </body> 29 </html>
11. 验证手机号
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>11. 验证手机号</title> 9 </head> 10 <body> 11 12 <input id="email" type="text" onblur="validatemobile(this.value)" value="" placeholder="请输入11位有效的手机号码！" /> 13 14 <script type="text/javascript"> 15 function validatemobile(mobile) 16 { 17 if(mobile.length==0) 18 { 19 alert('手机号码不能为空！'); 20 return false; 21 } 22 if(mobile.length!=11) 23 { 24 alert('请输入有效的手机号码，需是11位！'); 25 return false; 26 } 27 28 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 29 if(!myreg.test(mobile)) 30 { 31 alert('请输入有效的手机号码！'); 32 return false; 33 } 34 } 35 </script> 36 37 </body> 38 </html>
12. 验证身份证号码（需是有效身份证）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 7 <meta name="format-detection"content="telephone=no"> 8 <title>12. 验证身份证号码</title> 9 </head> 10 <body> 11 12 <p>12. 验证身份证号码</p> 13 <input id="idCard" type="text" onblur="valiIdCard(this.value)" value="" placeholder="请输入真实的身份证号！" /> 14 15 <script type="text/javascript"> 16 // 构造函数，变量为15位或者18位的身份证号码 17 function clsIDCard(CardNo) { 18 this.Valid=false; 19 this.ID15=''; 20 this.ID18=''; 21 this.Local=''; 22 if(CardNo!=null)this.SetCardNo(CardNo); 23 } 24 25 // 设置身份证号码，15位或者18位 26 clsIDCard.prototype.SetCardNo = function(CardNo) { 27 this.ID15=''; 28 this.ID18=''; 29 this.Local=''; 30 CardNo=CardNo.replace(" ",""); 31 var strCardNo; 32 if(CardNo.length==18) { 33 pattern= /^\d{17}(\d|x|X)$/; 34 if (pattern.exec(CardNo)==null)return; 35 strCardNo=CardNo.toUpperCase(); 36 } else { 37 pattern= /^\d{15}$/; 38 if (pattern.exec(CardNo)==null)return; 39 strCardNo=CardNo.substr(0,6)+'19'+CardNo.substr(6,9) 40 strCardNo+=this.GetVCode(strCardNo); 41 } 42 this.Valid=this.CheckValid(strCardNo); 43 } 44 45 // 校验身份证有效性 46 clsIDCard.prototype.IsValid = function() { 47 return this.Valid; 48 } 49 50 // 返回生日字符串，格式如下，1981-10-10 51 clsIDCard.prototype.GetBirthDate = function() { 52 var BirthDate=''; 53 if(this.Valid)BirthDate=this.GetBirthYear()+'-'+this.GetBirthMonth()+'-'+this.GetBirthDay(); 54 return BirthDate; 55 } 56 57 // 返回生日中的年，格式如下，1981 58 clsIDCard.prototype.GetBirthYear = function() { 59 var BirthYear=''; 60 if(this.Valid)BirthYear=this.ID18.substr(6,4); 61 return BirthYear; 62 } 63 64 // 返回生日中的月，格式如下，10 65 clsIDCard.prototype.GetBirthMonth = function() { 66 var BirthMonth=''; 67 if(this.Valid)BirthMonth=this.ID18.substr(10,2); 68 if(BirthMonth.charAt(0)=='0')BirthMonth=BirthMonth.charAt(1); 69 return BirthMonth; 70 } 71 72 // 返回生日中的日，格式如下，10 73 clsIDCard.prototype.GetBirthDay = function() { 74 var BirthDay=''; 75 if(this.Valid)BirthDay=this.ID18.substr(12,2); 76 return BirthDay; 77 } 78 79 // 返回性别，1：男，0：女 80 clsIDCard.prototype.GetSex = function() { 81 var Sex=''; 82 if(this.Valid)Sex=this.ID18.charAt(16)%2; 83 return Sex; 84 } 85 86 // 返回15位身份证号码 87 clsIDCard.prototype.Get15 = function() { 88 var ID15=''; 89 if(this.Valid)ID15=this.ID15; 90 return ID15; 91 } 92 93 // 返回18位身份证号码 94 clsIDCard.prototype.Get18 = function() { 95 var ID18=''; 96 if(this.Valid)ID18=this.ID18; 97 return ID18; 98 } 99 100 // 返回所在省，例如：上海市、浙江省 101 clsIDCard.prototype.GetLocal = function() { 102 var Local=''; 103 if(this.Valid)Local=this.Local; 104 return Local; 105 } 106 107 clsIDCard.prototype.GetVCode = function(CardNo17) { 108 var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1); 109 var Ai = new Array('1','0','X','9','8','7','6','5','4','3','2'); 110 var cardNoSum = 0; 111 for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i]; 112 var seq = cardNoSum%11; 113 return Ai[seq]; 114 } 115 116 clsIDCard.prototype.CheckValid = function(CardNo18) { 117 if(this.GetVCode(CardNo18.substr(0,17))!=CardNo18.charAt(17))return false; 118 if(!this.IsDate(CardNo18.substr(6,8)))return false; 119 var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"* ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"*",71:"*",81:"香港",82:"澳门",91:"国外"}; 120 if(aCity[parseInt(CardNo18.substr(0,2))]==null)return false; 121 this.ID18=CardNo18; 122 this.ID15=CardNo18.substr(0,6)+CardNo18.substr(8,9); 123 this.Local=aCity[parseInt(CardNo18.substr(0,2))]; 124 return true; 125 } 126 127 clsIDCard.prototype.IsDate = function(strDate) { 128 var r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/); 129 if(r==null)return false; 130 var d= new Date(r[1], r[2]-1, r[3]); 131 return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[2]&&d.getDate()==r[3]); 132 } 133 134 135 function valiIdCard(idCard){ 136 var checkFlag = new clsIDCard(idCard); 137 if (!checkFlag.IsValid()) { 138 alert("输入的身份证号无效,请输入真实的身份证号！"); 139 document.getElementByIdx("idCard").focus(); 140 return false; 141 }else{ 142 alert("是有效身份证！"); 143 } 144 } 145 </script> 146 147 </body> 148 </html>