关于表单验证
Posted degui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于表单验证相关的知识，希望对你有一定的参考价值。
第一版:纯Js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>注册表单</title> <script type="text/javascript"> function checkSubmit() { /*获取值*/ //用户名 var name = document.getElementById("txtname").value; //性别 document.getElementsByName var sexs = document.getElementsByName("sex"); //密码 var pwd1 = document.getElementById("pwd1").value; //确认密码 var pwd2 = document.getElementById("pwd2").value; //年龄 var age = document.getElementById("seleage").value; //爱好 var hobbys = document.getElementsByName("hobby"); //简介 var txtarea = document.getElementById("txtarea").value; /*验证*/ if(name=="") { alert("用户名不能为空,请重新输入！"); document.getElementById("txtname").focus(); return false; } //获取单选框 var sex = ""; for(var i=0;i<sexs.length;i++) { if(sexs[i].checked) { sex = sexs[i].value; } } if(pwd1=="") { alert("密码不能为空！"); document.getElementById("pwd1").focus(); return false; } if(pwd1.length<2) { alert("密码必须大于等于2位！"); return false; } if(pwd2=="") { alert("确认密码不能为空！"); document.getElementById("pwd2").focus(); return false; } if(pwd2!=pwd1) { alert("两次输入密码必须一致！"); document.getElementById("pwd2").focus(); return false; } if(pwd2.length<2) { alert("确认密码必须大于等于2位！"); document.getElementById("pwd2").focus(); return false; } //爱好 if(hobbys.length==0){ alert("爱好至少一项"); return; } var hobby=""; for(var i=0;i<hobbys.length;i++){ if(hobbys[i].checked){ hobby+=hobbys[i].value+"";} } //验证通过 document.write("恭喜注册成功"); document.write("<br />请保管好注册信息"); document.write("<br />用户名:"+name); document.write("<br />性别:"+sex); document.write("<br />密码:"+pwd2); document.write("<br />年龄:"+age); document.write("<br />爱好:"+hobby); if(txtarea==""){ document.write("<br />简介:这人很懒,什么也没留下"); }else{ document.write("<br />简介:"+txtarea); } return true; } </script> </head> <body> <form name="myform" method="post" onSubmit="return checkSubmit();" action="#"> <table width="500" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <th colspan="3">用户注册</th> </tr> <tr> <td width="100">用户名:</td> <td width="200"><input type="text" id="txtname" name="txtname"/></td> <td width="200">用户名不能为空</td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" id="sexM" value="男" checked="checked"/> <label>男</label> <input type="radio" name="sex" id="sexF" value="女" /> <label>女</label></td> <td> </td> </tr> <tr> <td>密码:</td> <td><input type="password" id="pwd1" /></td> <td>密码必须大于等于2位</td> </tr> <tr> <td>确认密码:</td> <td><input type="password" id="pwd2" /></td> <td>确认密码必须与密码一致</td> </tr> <tr> <td>年龄:</td> <td><select id="seleage" name="seleage"> <option value="10以下" selected="selected">10以下</option> <option value="10-20">10-20</option> <option value="20-40">20-40</option> <option value="40以上">40以上</option> </select></td> <td> </td> </tr> <tr> <td>爱好:</td> <td><input type="checkbox" name="hobby" value="音乐" id="chkmusic"/> <label>音乐</label> <input type="checkbox" name="hobby" value="游戏" id="chkgame"/> <label>游戏</label> <input type="checkbox" name="hobby" value="其他" id="chkother"/> <label>其他</label></td> <td>爱好必须一项</td> </tr> <tr> <td height="100">简介:</td> <td><textarea id="txtarea" name="txtarea" rows="6"></textarea></td> <td> </td> </tr> <tr> <td align="center" colspan="3"><input name="submit" type="submit" value="提交"/> <input name="reset" type="reset" value="重置"/></td> </tr> </table> </form> </body> </html>
第二版:正则表单式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>注册表单</title> <script type="text/javascript"> /* 正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/*/ var reg = { user:/^[a-zA-Z]\w{4,9}$/, //用来判断用户名，第一位不能为数字，也就是小写字母或者大写字母，后面的内容\w表示字符（数字字母下划线） //要求是5-10位字符，所以出去第一位，还需要4-9位的\w pwd:/^[\da-zA-Z]{6,18}$/, //用来判断密码，html结构中要求是数字字符6到18位，\d表示数字 tel:/^1[34578]\d{9}$/, //用来判断电话号码，通常手机号第一位为1，第二位只可能出现3.4.5.7.8，后面剩下的9位数字随机 mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/, //用来判断邮箱，通常邮箱没有以0开头的，所以第一位为1-9数字或者小写字母或者大写字母，第二位开始任意字符 //也可以只有第一位没有第二位，*表示至少0个，@后面同理，小写字母或者大写字母或者数字，.需要转意符，所以写成\. } //点后面通常是com或者cn或者com.cn，所以是小写字母或者大写字母至少两位 //电话号码：d{3}-d{8}|d{4}-d{7} //腾讯QQ号：[1-9][0-9]{4,} //邮政编码：[1-9]d{5}(?!d) //身份证：d{15}|d{18} //ip地址：d+.d+.d+.d+ //特定数字： //正整数:^[1-9]d*$ //负整数: ^-[1-9]d*$ //整数:^-?[1-9]d*$ //匹配特定字符串： //26个英文字母: ^[A-Za-z]+$ //大写:^[A-Z]+$ //小写:^[a-z]+$ //数字和字母^[A-Za-z0-9]+$ //^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串 //数字：“^[0-9]*$” //n位数字：“^d{n}$” //n位数字：“^d{n,}$” //m-n位的数字：“^d{m,n}$” //零和非零开头的数字：“^(0|[1-9][0-9]*)$” //有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$” //1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$” //非零的正整数：“^+?[1-9][0-9]*$” //非零的负整数：“^-[1-9][0-9]*$” //长度为3的字符：“^.{3}$” //验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间， 只能包含字符、数字和下划线。 //是否含有^%&‘‘,;=?$"等字符：“[^%&‘‘,;=?$x22]+” //汉字：“^[u4e00-u9fa5],{0,}$” //Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$” //tURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$” //电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$” //12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12” //一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$” 正确格式为：“01”“09”和“1”“31”。 //中文字符的正则表达式： [u4e00-u9fa5] //双字节字符(包括汉字在内)：[^x00-xff] //空行的正则表达式：n[s| ]*r //HTML标记的正则表达式：/<(.*)>.*|<(.*) />/ //首尾空格的正则表达式：(^s*)|(s*$) //Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* //regex正则表达式 //inputStr需要验证的字符串 //helpText提供信息提示的一个span标签 //helpMessage提示信息内容 // /*function validateRegExp(regex,inputStr,helpText,helpMessage) { if(!regex.test(inputStr)) { if(helpText!=null) helpText.innerHTML=helpMessage; return false; } else{ if(helpText!=null) helpText.innerHTML=""; } return true; }*/ /*function validateDate(inputFild,helpText) { //先检查参数是非空的 if(!validateNonEmpty(inputFild,helpText)) { return false; } return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法 }*/ function checkMail() { var regMail=new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/) var mail = document.getElementById("mail").value; if(!regMail.test(mail)) { document.getElementById("mail").focus(); alert("请输入正确的邮箱地址"); return false; } } </script> </head> <body> <form name="myform" method="post" onSubmit="return checkSubmit();" action="#"> <table width="500" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <th colspan="3">用户注册</th> </tr> <tr> <td width="100">用户名:</td> <td width="200"><input type="text" id="txtname" name="txtname" onblur=""/></td> <td width="200">用户名不能为空</td> </tr> <tr> <td>性别:</td> <td><input type="radio" name="sex" id="sexM" value="男" checked="checked"/> <label>男</label> <input type="radio" name="sex" id="sexF" value="女" /> <label>女</label></td> <td> </td> </tr> <tr> <td>密码:</td> <td><input type="password" id="pwd1" /></td> <td>密码必须大于等于2位</td> </tr> <tr> <td>确认密码:</td> <td><input type="password" id="pwd2" /></td> <td>确认密码必须与密码一致</td> </tr> <tr> <td>年龄:</td> <td><select id="seleage" name="seleage"> <option value="10以下" selected="selected">10以下</option> <option value="10-20">10-20</option> <option value="20-40">20-40</option> <option value="40以上">40以上</option> </select></td> <td> </td> </tr> <tr> <td>爱好:</td> <td><input type="checkbox" name="hobby" value="音乐" id="chkmusic"/> <label>音乐</label> <input type="checkbox" name="hobby" value="游戏" id="chkgame"/> <label>游戏</label> <input type="checkbox" name="hobby" value="其他" id="chkother"/> <label>其他</label></td> <td>爱好必须一项</td> </tr> <tr> <td>邮箱:</td> <td><input type="text" id="mail" onblur="checkMail()"/></td> <td></td> </tr> <tr> <td height="100">简介:</td> <td><textarea id="txtarea" name="txtarea" rows="6"></textarea></td> <td> </td> </tr> <tr> <td align="center" colspan="3"><input name="submit" type="submit" value="提交"/> <input name="reset" type="reset" value="重置"/></td> </tr> </table> </form> </body> </html>