表单验证和正则表达式
表单验证:
一、非空验证: 1、内容是不是空的。 判断值的长度是不是0。length属性。
2、内容是不是改变了。
二、对比验证: 1、验证两个控件值的关系(相同,大小)
2、验证控件的值与某个固定值的关系。
三、范围验证:
四、格式验证: 正则表达式。regularexpression
字符 描述 \ 标记下一个字符是特殊字符或文字。例如,"n" 和字符 "n" 匹配。"\n" 则和换行字符匹配。序列 "\\" 和 "\" 匹配,而 "\(" 则和 "(" 匹配。 ^ 匹配输入的开头。 $ 匹配输入的末尾。 * 匹配前一个字符零或多次。例如,"zo*" 与 "z" 或 "zoo" 匹配。 + 匹配前一个字符一次或多次。例如,"zo+" 与 "zoo" 匹配,但和 "z" 不匹配。 ? 匹配前一个字符零或一次。例如,"a?ve?" 和 "never" 中的 "ve" 匹配。 . 匹配除换行字符外的任何单个字符。 (pattern) 匹配 pattern 并记住该匹配。匹配上的子字符串,可以使用 Item [0]...[n],来从生成的 Matches 集合中取回。要匹配圆括号字符 ( ),则需使用 "\(" 或 "\)"。 x|y 匹配 x 或 y。例如,"z|food" 和 "z" 或 "food" 匹配。"(z|f)ood" 匹配 "zoo" 或 "food"。 {n} n 是非负整数。共匹配 n 次。例如,"o{2}" 和 "Bob" 中的 "o" 不匹配,但和 "foooood" 中的前两个 o 匹配。 {n,} n 是一个非负整数。至少匹配 n 次。例如,"o{2,}" 和 "Bob" 中的 "o" 不匹配,但和 "foooood" 中的所有 o 匹配。"o{1,}" 与 "o+" 等效。"o{0,}" 和 "o*" 等效。 {n,m} m 和 n 是非负整数。至少匹配 n 次而至多匹配 m 次。例如,"o{1,3}" 和 "fooooood" 中的前三个 o 匹配。"o{0,1}" 和 "o?" 等效。 [ xyz] 字符集合。匹配括号内的任一字符。例如,"[abc]" 和 "plain" 中的 "a" 匹配。 [^xyz ] 否定字符集合。匹配非括号内的任何字符。例如,"[^abc]" 和 "plain" 中的 "p" 匹配。 [a-z] 字符范围。和指定范围内的任一字符匹配。例如,"[a-z]" 匹配 "a" 到 "z"范围内的任一小写的字母表字符。 [^m-z] 否定字符范围。匹配不在指定范围内的任何字符。例如,"[m-z]" 匹配不在 "m" 到 "z"范围内的任何字符。 \b 匹配字的边界,也就是说,在字和空格之间的位置。例如,"er\b" 和 "never" 中的 "er" 匹配,但和 "verb" 中的 "er" 不匹配。 \B 匹配非字边界。"ea*r\B" 和 "never early" 中的 "ear" 匹配。 \d 匹配数字字符。等价于 [0-9]。 \D 匹配非数字字符。等价于 [^0-9]。 \f 匹配换页字符。 \n 匹配换行字符。 \r 匹配回车符字符。 \s 匹配任何空白,包括空格、制表、换页等。与 "[ \f\n\r\t\v]" 等效。 \S 匹配任何非空白字符。与 "[^ \f\n\r\t\v]" 等效。 \t 匹配制表字符。 \v 匹配垂直制表符。 \w 匹配包括下划线在内的任何字字符。与 "[A-Za-z0-9_]" 等效。 \W 匹配任何非字字符。与 "[^A-Za-z0-9_]" 等效。 \num 匹配 num,其中 num 是一个正整数。返回记住的匹配的引用。例如,"(.)\1" 匹配两个连续的同一字符。 \n 匹配 n,其中 n 是八进制换码值。八进制换码值必须是 1、2、或 3 位长。例如,"\11" 和 "\011" 都匹配制表字符。"\0011" 和 "\001" & "1" 是等效的。八进制换码值必须不超过 256。如果超过了,则只有前两位组成表达式。允许在正则表达式中使用 ASCII 码。 \xn 匹配 n,其中 n 是十六进制换码值。十六进制换码值必须正好是两位长。例如,"\x41" 与 "A" 匹配。"\x041" 和 "\x04" & "1" 是等效的。允许在正则表达式中使用 ASCII 码。
邮箱验证:(其他验证也是这个形式,只要把正则表达式换一下就可以)
function checkEmail() { var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var txt = document.getElementById("txtEmail").value; if(txt.match(reg) == null) { alert("邮箱格式不正确"); return false; } else { return true; } }
五、其它验证:
案例一、邮箱验证:
<body> <form action="" method="get"> <table width="100%" border="1"> <tr> <td width="20%" height="40" align="right">用户名:</td> <td width="50%"> <input type="text" name="uid" id="uid" value="必填" style="color:#666" /></td> <td width="30%"> </td> </tr> <tr> <td height="40" align="right">密码:</td> <td> <input type="text" name="uid2" id="idpd1" /></td> <td> </td> </tr> <tr> <td height="40" align="right">确认密码:</td> <td> <input type="text" name="uid3" id="idpd2" /></td> <td> </td> </tr> <tr> <td height="40" align="right">邮箱:</td> <td> <input type="text" name="uid4" id="idemile" /></td> <td> </td> </tr> </table> <input type="submit" value="提交" onclick="return pp1()" /> </form> <script language="javascript"> function onui() { var ui1=document.getElementById("uid").value; if(ui1=="必填" || ui1.length=="0") { return "用户名不能为空\n"; } else { return ""; } } function onpd() { var error2=""; var pd1=document.getElementById("idpd1").value; if(pd1.length=="0") { error2+="密码不能为空\n"; } var pd2=document.getElementById("idpd2").value; if(pd2.length=="0") { error2+="确定密码不能为空\n"; } if(pd1!=pd2) { error2+="两次密码输入不一致\n"; } return error2; } function onemile() { var error3=""; var emile1=document.getElementById("idemile"); if(emile1.value.length=="0") { error3+="邮箱不能为空\n"; } else { var reg=/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/; if(emile1.value.match(reg)==null) { error3+="邮箱格式不正确\n"; } } return error3; } function pp1() { var allerror=""; allerror+=onui(); allerror+=onpd(); allerror+=onemile(); if(allerror.length==0) { return true; } else { alert(allerror); return false; } } </script> </body>
案例二、微博输入140字,键盘或复制粘贴,输一个少一个。
<body> <form action="" method="get"> <textarea name="aaa" cols="20px" id="aaa" rows="10" onmousedown="pp1()" onkeyup="pp1()"></textarea> <div id="bbb">还可以输入140个字</div> </form> <script language="javascript"> function pp1() { var a1=document.getElementById("aaa").value; var a2=document.getElementById("bbb"); var s=a1.length; if(140-s>=0) { a2.innerHTML="还可以输入"+(140-s)+"个字"; window.setTimeout("pp1()",50); } else { a2.innerHTML="你输入的字以超出140字"; } } </script> </body>
效果图:
案例三、必填:
<body> <form action="" method="get"> <table width="100%" border="1"> <tr> <td width="20%" height="40" align="right">用户名:</td> <td width="50%"> <input type="text" name="uid" id="uid" value="必填" style="color:#999" onfocus="chuxian()" onblur="xiaoshi()" /></td> <td width="30%"> </td> </tr> <tr> <td height="40" align="right">密码:</td> <td> <input type="text" name="uid2" id="idpd1" /></td> <td> </td> </tr> <tr> <td height="40" align="right">确认密码:</td> <td> <input type="text" name="uid3" id="idpd2" /></td> <td> </td> </tr> <tr> <td height="40" align="right">邮箱:</td> <td> <input type="text" name="uid4" id="idemile" /></td> <td> </td> </tr> </table> </form> <script language="javascript"> var yanse=document.getElementById("uid").style.color; function chuxian() { var a=document.getElementById("uid"); if(a.value=="必填" && a.style.color==yanse) { a.value=""; a.style.color="black"; } } function xiaoshi() { var a=document.getElementById("uid"); if(a.value=="") { a.value="必填"; a.style.color="#999"; } } </script> </body>