自己写了个简单表单验证:
- <!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 language="javascript">
- function checkUserNum(str){
- if(str.length<3 || str.length>18){
- document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号长度在3-18字符内</font>";
- form1.password.focus();
- return false;
- }
- var flag = str.match(/\D/)==null;
- if(!flag==true){
- document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号必须有0-9数字组成</font>";
- form1.usernum.focus();
- return false;
- }
- document.getElementById("usernumErr").innerHTML = "";
- return true;
- };
- function checkUserName(username){
- if(username.length == 0){
- document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";
- form1.username.focus();
- return false;
- }
- var patn = /^[a-zA-Z]+[a-zA-Z0-9]+$/;
- if(!patn.test(username)){
- document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)</font>";
- form1.username.focus();
- return false;
- }
- document.getElementById("usernameErr").innerHTML = "";
- return true;
- };
- function checkPwd(str){
- if(str.length<3 || str.length>18){
- document.getElementById("passwordErr").innerHTML = "<font color='red'>密码长度在3-18字符内</font>";
- form1.password.focus();
- return false;
- }
- if(escape(str).indexOf("%u")!=-1){
- document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能含有中文</font>";
- form1.password.focus();
- return false;
- }
- document.getElementById("passwordErr").innerHTML = "";
- return true;
- };
- function confrimPwd(str){
- var pwd = document.form1.password.value;
- if(str!=pwd){
- document.getElementById("password2Err").innerHTML = "<font color='red'>密码不一致!</font>";
- form1.password2.value="";
- form1.password2.focus();
- return false;
- }
- document.getElementById("password2Err").innerHTML = "";
- return true;
- };
- function checkEmail(email){
- if(email==""){
- document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";
- form1.email.focus();
- return false;
- }
- var reg=new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");
- if(!reg.test(email)){
- document.getElementById("emailErr").innerHTML = "<font color='red'>E-MAIL格式输入不正确!</font>";
- form1.email.focus();
- return false;
- }
- document.getElementById("emailErr").innerHTML = "";
- return true;
- };
- function checkTel(tel){
- var i,j,strTemp;
- strTemp="0123456789-()#";
- for(i=0;i<tel.length;i++){
- j=strTemp.indexOf(tel.charAt(i));
- if(j==-1){
- document.getElementById("telErr").innerHTML = "<font color='red'>Tel格式输入不正确!</font>";
- form1.tel.focus();
- return false;
- }
- }
- document.getElementById("telErr").innerHTML = "";
- return true;
- };
- function checkForm(){
- if(document.form1.usernum.value.length == 0){
- document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号不能为空</font>";
- form1.usernum.focus();
- return false;
- }
- if(document.form1.username.value.length == 0){
- document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";
- form1.username.focus();
- return false;
- }
- if(document.form1.password.value.length == 0){
- document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能为空</font>";
- form1.password.focus();
- return false;
- }
- if( !(form1.sex[0].checked || form1.sex[1].checked) ){
- document.getElementById("sexErr").innerHTML = "<font color='red'>请选择性别</font>";
- form1.sex[0].focus();
- return false;
- }
- if(document.form1.email.value==""){
- document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";
- form1.email.focus();
- return false;
- }
- document.getElementById("usernumErr").innerHTML = "";
- document.getElementById("usernameErr").innerHTML = "";
- document.getElementById("passwordErr").innerHTML = "";
- document.getElementById("sexErr").innerHTML = "";
- document.getElementById("emailErr").innerHTML = "";
- return true;
- };
- </script>
- </head>
- <body>
- <form name="form1" action="#" method="post" onsubmit="return checkForm();" >
- <table width="0" border="1">
- <tr>
- <th scope="row">UserNumber:</th>
- <td>
- <input type="text" name="usernum" onblur="return checkUserNum(this.value);" />
- <span id="usernumErr"></span>
- </td>
- </tr>
- <tr>
- <th scope="row">UserName:</th>
- <td>
- <input type="text" name="username" onblur="return checkUserName(this.value);" />
- <span id="usernameErr"></span>
- </td>
- </tr>
- <tr>
- <th scope="row">PassWord:</th>
- <td>
- <input type="password" name="password" onblur="return checkPwd(this.value);" />
- <span id="passwordErr"></span>
- </td>
- </tr>
- <tr>
- <th scope="row">ConfirmPassword:</th>
- <td>
- <input type="password" name="password2" onblur="return confrimPwd(this.value);" />
- <span id="password2Err"></span>
- </td>
- </tr>
- <tr>
- <th scope="row">sex</th>
- <td>
- <input type="radio" name="sex" value="男" />男
- <input type="radio" name="sex" value="女" />女
- <span id="sexErr"></span>
- </td>
- </tr>
- <tr>
- <th scope="row">Email:</th>
- <td>
- <input type="text" name="email" onblur="return checkEmail(this.value);" />
- <span id="emailErr"></span>
- </td>
- </tr>
- <tr>
- <th scope="row">Tel:</th>
- <td>
- <input type="text" name="tel" onblur="return checkTel(this.value);" />
- <span id="telErr"></span>
- </td>
- </tr> <tr>
- <th scope="row"> </th>
- <td> </td>
- </tr>
- <tr>
- <th scope="row"><input type="submit" value="submit" /></th>
- <td><input type="reset" value="reset" /></td>
- </tr>
- </table>
- </form>
- </body>
- </html>