javascript表单验证实例-原创手记-慕课网

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.inputstyle {
width: 150px;
height: 20px;
}
div {
color: #F00;
font-size: 12px;
}
</style>
<script>
//用户名验证
function checkUser(){
var user=document.getElementById("username").value;
var divuserId=document.getElementById("user_prompt");
divuserId.innerHTML="";
var reg=/^\w{4,16}$/;
var result=reg.test(user);
if(!result){
divuserId.innerHTML="请重新输入用户名";
return false;

         }
         return true;

     }
     //密码验证
     function checkPass(){
         var pass=document.getElementById("password").value;
         var divpassId=document.getElementById("pass_prompt");
         divpassId.innerHTML="";
         var reg=/^[a-zA-Z0-9]{4,10}$/;
         var result=reg.test(pass);
         if(!result){
             divpassId.innerHTML="密码输入错误，请重新输入";
             return false;
             }
             return true;
         }
         //确认密码验证
         function checkRepass(){
             var pass=document.getElementById("password").value;
             var repass=document.getElementById("repass").value;
             var divrepassId=document.getElementById("repass_prompt");

             if(pass!=repass){
                  divrepassId.innerHTML="两次密码不一致，请重新输入";
                  return false;

                 }
                  divrepassId.innerHTML="";
                  return true;

             }

            //性别验证
            function checkGender(){
                var gen=document.getElementsByName("gender");
                var genValue="";
                for(var i=0;i<gen.length;i++){
                    if(gen[i].checked==true){

                        genValue=gen[i].value;
                        return true;
                        }
                    return false;

                    }
                } 

            //多选验证
            function checkHobby(){
                var hobb=document.getElementsByName("hobby");
                for(var i=0;i<hobb.length;i++){

                    hobb[i].checked=document.getElementById("all").checked;
                    }
            }
        //省份的验证
        var cityList=new Array();
         cityList ["甘肃省"]=["武威市","天水市","兰州市"];  
         cityList['海南省'] = ['海口市'];
         cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
         cityList['山东省'] = ['济南市','青岛市','烟台市'];
         cityList['江西省'] = ['南昌市'];
         cityList['广西省'] = ['柳州市','南宁市'];
        function  checkProvince(){
            var province=document.getElementById("province").value;
            var city=document.getElementById("city");
            city.options.length=0;
            for(var i in cityList){
                if(i==province){
                    for(var j in cityList[i]){
                        city.add(new Option(cityList[i][j],cityList[i][j]),null);

                        }
                    }
                }
            }
            function allcity(){
                var province=document.getElementById("province");
                for(var i in cityList){
                    province.add(new Option(i,i),null);

                    }

                }
                window.onload=allcity;

 //表单提交
 function checkAll(obj){
     if(!checkUser()){
         alert("请输入正确的用户名");
         return false;

         }
        else if(!checkPass()){
            alert("请重新输入密码");
            return false;
            } 
            else if(!checkRepass()){
            alert("两次密码不一致");
            return false;
            }
            else  if(document.getElementById("province").value==" " ){
                alert("请选择省份");
                return false;
                }

         return true;

     }

</script>
</head>

<body>
<form name="form1" method="post" action="index.html" onSubmit="return checkAll(this)">
<table width="753" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="40" align="right" valign="middle" bgcolor="#D0D8FF">用户名：</td>
<td width="216" height="40" align="left" valign="middle" bgcolor="#D0D8FF"><input type="text" class="inputstyle" id="username" name="username" onBlur="checkUser()" ></td>
<td width="426" align="left" valign="middle" bgcolor="#D0D8FF"><div id="user_prompt">用户名由英文字母
和数字组成的4-16位字符</div></td>
</tr>
<tr>
<td width="150" height="40" align="right" valign="middle" bgcolor="#D0D8FF"><p>密码：</p></td>
<td width="216" height="40" align="left" valign="middle" bgcolor="#D0D8FF"><input type="password" class="inputstyle" id="password" name="password" onBlur="checkPass()" ></td>
<td align="left" valign="middle" bgcolor="#D0D8FF"><div id="pass_prompt">密码由英文字母和数字组成的4-10位字符 </div></td>
</tr>
<tr>
<td width="150" height="40" align="right" valign="middle" bgcolor="#D0D8FF">确认密码：</td>
<td width="216" height="40" align="left" valign="middle" bgcolor="#D0D8FF"><input type="password" class="inputstyle" id="repass" name="repass" onBlur="checkRepass()" ></td>
<td align="left" valign="middle" bgcolor="#D0D8FF"><div id="repass_prompt"></div></td>
</tr>
<tr>
<td width="150" height="40" align="right" valign="middle" bgcolor="#D0D8FF">性别：</td>
<td width="216" height="40" align="left" valign="middle" bgcolor="#D0D8FF"><input type="radio" name="gender" id="radio" value="1" onclick="checkGender()">
男
<label for="gender"></label>
<input name="gender" type="radio" id="radio2" value="2" checked onclick="checkGender()">
女</td>
<td align="left" valign="middle" bgcolor="#D0D8FF"></td>
</tr>
<tr>
<td width="150" height="40" align="right" valign="middle" bgcolor="#D0D8FF">爱好：</td>
<td height="40" colspan="2" align="left" valign="middle" bgcolor="#D0D8FF"><label for="province">
<input type="checkbox" name="hobby" id="hobby"/>
唱歌
<input type="checkbox" name="hobby" id="hobby"/>
跳舞
<input type="checkbox" name="hobby" id="hobby"/>
画画
<input type="checkbox" name="hobby" id="hobbby"/>
运动
<input type="checkbox" name="all" id="all" onChange="checkHobby()"/>
全选 </label></td>
</tr>
<tr>
<td width="150" height="40" align="right" valign="middle" bgcolor="#D0D8FF">所属地：</td>
<td height="40" colspan="2" align="left" valign="middle" bgcolor="#D0D8FF">省份：
<select name="province" class="inputstyle" id="province" onChange="checkProvince()"/>
<option>--请选择省份--</option>

    </select>
    城市：
    <select name="city" class="inputstyle" id="city"/>
      <option></option>
    </select>
</td>
</tr>
<tr>
  <td height="40" colspan="3" align="center" valign="middle" bgcolor="#D0D8FF"><input type="submit" name="button" id="button" value="提交"></td>
</tr>

</table>
</form>
</body>
</html>