表单验证：
一、非空验证：
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;
}
}
五、其它验证：
例题 表单验证
<title>表单验证</title> </head> <body> <form> <table width="100%"> <tr> <td width="20%">用户名</td> <td width="30%"><input type="txt" id="userID"></td> <td> </td> </tr> <tr> <td>密码</td> <td><input type="txt" id="PWD1"></td> <td> </td> </tr> <tr> <td>验证密码</td> <td><input type="txt" id="PWD2"></td> <td> </td> </tr> <tr> <td >邮箱</td> <td><input type="txt" id="mail"></td> <td> </td> </tr> <tr> <td>工资</td> <td><input type="txt" id="prize"></td> <td> </td> </tr> </table> <input type="submit" value="提交" onclick="return check()" > </form> </body> </html> <script language="javascript"> var user=document.getElementById("userID"); var pWD1=document.getElementById("PWD1"); var pWD2=document.getElementById("PWD2"); var mail=document.getElementById("mail"); var prize=document.getElementById("prize"); function checkUser() { if (user.value.length==0) { return "用户名不能为空 "; } else { return "";} } function checkPWD1() { if (pWD1.value.length==0) { return "密码不能为空 "; } else { return "";} } function checkPWD2() { if (pWD2.value.length==0) { return "验证密码不能为空 "; } else if(pWD1.value.length!=pWD2.value.length) { return "两次输入的密码不一致 "; } else { return "";} } function checkmail() { var flMail=/^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/; if (mail.value.length==0) { return "邮箱不能为空 "; } else if(mail.value.match(flMail)== null) { return "邮箱格式不正确 "; } else { return ""; } } function checkprize() { if (prize.value.length==0) { return "工资不能为空 "; } else { if(isNaN(prize.value)==false) { var PRI=parseInt(prize.value); if(PRI<0) { return "工资不正确"; } else { return ""; } } else { return "工资只能是数字"; } } } function check() { var s=""; s+=checkUser(); s+=checkPWD1(); s+=checkPWD2(); s+=checkmail(); s+=checkprize(); if(s.length==0) { return true; } else { alert(s); return false; } } </script>
例题
<title>显示字符数目</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <label for="txt"></label> <textarea name="txt" id="txt" cols="45" rows="5" onkeyup="CNT()"></textarea> <span id="NUM">字数150</span> </form> </body> </html> <script language="javascript"> function CNT() { var txt=document.getElementById("txt"); var num=txt.value.length; var NUM=document.getElementById("NUM"); NUM.innerHTML="字数"+(150-num); //加上递归调用，可以实现即使用鼠标复制粘贴，也可以统计数字 window.setTimeout("CNT()",500); } </script>
例题
<title>必填选项表单的制作</title> </head> <body> <form> <table width="100%"> <tr> <td width="20%">用户名</td> <td width="30%" ><input style="color:#999999" type="txt" id="userID" / value="必填" onfocus="doFocus()" onblur="doBlur()"></td> <td> </td> </tr> <tr> <td>密码</td> <td><input type="txt" id="PWD1" /></td> <td> </td> </tr> <tr> <td>验证密码</td> <td><input type="txt" id="PWD2" /></td> <td> </td> </tr> <tr> <td >邮箱</td> <td><input type="txt" id="mail" /></td> <td> </td> </tr> <tr> <td>工资</td> <td><input type="txt" id="prize" /></td> <td> </td> </tr> </table> <input type="submit" value="提交" onclick="return check()" /> </form> </body> </html> <script language="javascript"> var atTxt=document.getElementById("userID"); c=atTxt.style.color; //c存储的是一个颜色，不能代表元素的属性 function doFocus() { if (atTxt.value=="必填"&&atTxt.style.color==c) { atTxt.value=""; atTxt.style.color="black"; } } function doBlur() { if(atTxt.value.length==0) { atTxt.value="必填"; atTxt.style.color=c; } } </script>
