标签：
表单验证：
一、非空验证：
1、内容是不是空的。
判断值的长度是不是0。length属性。
2、内容是不是改变了。
二、对比验证：
1、验证两个控件值的关系（相同，大小）
2、验证控件的值与某个固定值的关系。
三、范围验证：
四、格式验证：
正则表达式。regularexpression
邮箱验证：（其他验证也是这个形式，只要把正则表达式换一下就可以）
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>
标签：
原文地址：http://www.cnblogs.com/tzq9308/p/4257018.html
