表单验证：
一、非空验证：
1、内容是不是空的。
判断值的长度是不是0。length属性。
2、内容是不是改变了。
二、对比验证：
1、验证两个控件值的关系（相同，大小）
2、验证控件的值与某个固定值的关系。
三、范围验证：
四、格式验证：
正则表达式。regularexpression
字符 描述 标记下一个字符是特殊字符或文字。例如，"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"范围内的任何字符。 匹配字的边界，也就是说，在字和空格之间的位置。例如，"er" 和 "never" 中的 "er" 匹配，但和 "verb" 中的 "er" 不匹配。 B 匹配非字边界。"ea*rB" 和 "never early" 中的 "ear" 匹配。 d 匹配数字字符。等价于 [0-9]。 D 匹配非数字字符。等价于 [^0-9]。 f 匹配换页字符。 匹配换行字符。 匹配回车符字符。 s 匹配任何空白，包括空格、制表、换页等。与 "[ f v]" 等效。 S 匹配任何非空白字符。与 "[^ f v]" 等效。 匹配制表字符。 v 匹配垂直制表符。 w 匹配包括下划线在内的任何字字符。与 "[A-Za-z0-9_]" 等效。 W 匹配任何非字字符。与 "[^A-Za-z0-9_]" 等效。 um 匹配 num，其中 num 是一个正整数。返回记住的匹配的引用。例如，"(.)1" 匹配两个连续的同一字符。 匹配 n，其中 n 是八进制换码值。八进制换码值必须是 1、2、或 3 位长。例如，"11" 和 " 11" 都匹配制表字符。" 011" 和 " 01" & "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 "用户名不能为空 "; } else { return ""; } } function onpd() { var error2=""; var pd1=document.getElementById("idpd1").value; if(pd1.length=="0") { error2+="密码不能为空 "; } var pd2=document.getElementById("idpd2").value; if(pd2.length=="0") { error2+="确定密码不能为空 "; } if(pd1!=pd2) { error2+="两次密码输入不一致 "; } return error2; } function onemile() { var error3=""; var emile1=document.getElementById("idemile"); if(emile1.value.length=="0") { error3+="邮箱不能为空 "; } else { var reg=/^(w)+(.w+)*@(w)+((.w{2,3}){1,3})$/; if(emile1.value.match(reg)==null) { error3+="邮箱格式不正确 "; } } 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>