javascript表单提交验证（用户名，邮箱，，，，，）-原创手记-慕课网

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
div {
font-size: 14px;
color: #F00;
}
.inputstyle {
width: 150px;
}
</style>
<script>
//用户名验证
function checkUser(){
var user=document.getElementById("username").value;
var divUserId=document.getElementById("user_prompt");
var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
divUserId.innerHTML="";
if(reg.test(user)==false){
divUserId.innerHTML="用户名不正确";
return false;
}else{
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}$/;
if(reg.test(pass)==false){
divPassId.innerHTML="密码输入错误";
return false;
}return true;

}
//确认密码验证
function checkRepass(){
    var pass=document.getElementById("password").value;
    var repass=document.getElementById("newpass").value;
    var divRepassId=document.getElementById("repass_prompt");
    if(pass!=repass){
        divRepassId.innerHTML="两次密码不一致";
        return false;
        }
        return true;
    }
//生日验证
function checkBirth(){
    var birth=document.getElementById("birthday").value;
    var divBirthId=document.getElementById("birth_prompt");
    divBirthId.innerHTML="";
    var reg=/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
    if(reg.test(birth)==false){
        divBirthId.innerHTML="生日格式不正确,请输入正确的格式例如1989-03-09";
        return false;

        }
        divBirthId.innerHTML="";
        return true;    

    }
    //邮件验证
    function checkEmail(){
        var emai=document.getElementById("email").value;
        var divEmailId=document.getElementById("email_prompt");
        divEmailId.innerHTML="";
        var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
        if(reg.test(emai)==false){
                divEmailId.innerHTML="邮件格式不正确，请重新输入";
                return false;
            }
            divEmailId.innerHTML="";
            return true;

        }
        //手机号码验证
        function  checkTel(){
            var tel=document.getElementById("number").value;
            var DivTelId=document.getElementById("number_prompt");
            DivTelId.innerHTML="";
            var reg=/^1\d{10}$/;
            if(reg.test(tel)==false){
                DivTelId.innerHTML="输入错误，请重新输入";
                return false;
                }
                DivTelId.innerHTML="";
                return true;

            }
            //性别验证
            function checkgender(){
                var genArray=document.getElementsByName("gender");
                var genValue="";
                for(var i=0;i<genArray.length;i++){
                //alert(genArray[i].checked+" "+genArray[i].name + " "+ genArray[i].value); 
                    if(genArraay[i].checked==true){//得到选中的单选按钮状态
                        genValue=genArray[i].value;
                        }

                    }
                    if(genValue!=null&&genValue!=" "){
                        alert("genValue"+genValue);
                        }else{
                    alert("请选择性别");
                    }

                }
        //多选框的验证

        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 changeCity(){
           var pro=document.getElementById("province").value;
           var city=document.getElementById("city");
           city.options.length=0;
           for(var i in cityList){
               if(i==pro){
                   for(var j in cityList[i]){
                       city.add(new Option (cityList[i][j],cityList[i][j]),null);

                       }

                   }

               }

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

                   }

               }
                window.onload=allCity;

   //回车登录
   function checkData(){
       if(!checkUser()){
           alert("请输入正确的用户名");
           return false;

           }
       var keynum;
       if(window.event){
           keynum=event.keyCode();

           }else if(event.which){
               keynum=event.which; 
               }
    if(keynum==13){
        subMit("回车键已按，请登录")
        return true;
        }          

       return true;

       }
       function subMit(obj){

        document.form1.submit();   
            }

</script>
</head><body onkeydown="checkData();">
<form id="form1" name="form1" method="post" action="success.html" onSubmit="return checkData()">
<table width="698" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color:#C0DFEB">
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">用户名：</td>
<td width="202" height="30" align="left" valign="middle" bgcolor="#99CCCC"><label for="textfield"></label>
<input type="text" name="username" id="username" class="inputstyle" onBlur="checkUser()"/></td>
<td width="385" align="left" valign="middle" bgcolor="#99CCCC"><div id="user_prompt">用户名由英文字母
和数字组成的4-16位字符，以字母开头</div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">密码：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="password" name="password" id="password" class="inputstyle" onBlur="checkPass()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="pass_prompt"> 密码由英文字母和数字组成的4-10位字符 </div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">确认密码：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="password" name="newpass" id="newpass" class="inputstyle" onblur="checkRepass()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="repass_prompt"></div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">生日：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="text" name="birthday" id="birthday" class="inputstyle" onblur="checkBirth()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="birth_prompt"></div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">性别：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><p>
<label>
<input type="radio" name="gender" value="男" id="gender_0" onclick="checkgender()" selected/>
男</label>
<label>
<input type="radio" name="gender" value="女" id="gender_1" onclick="checkgender()" />
女</label>
<br />
</p></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="gender_prompt"></div></td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">邮件地址：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="text" name="email" id="email" class="inputstyle" onBlur="checkEmail()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="email_prompt"></div></td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">手机号码:</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="text" name="number" id="number" class="inputstyle" onBlur="checkTel()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="number_prompt"></div></td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">爱好：

    <label for="checkbox"></label></td>
  <td height="30" colspan="2" align="left" valign="middle" bgcolor="#99CCCC"><input type="checkbox" name="hobby" id="checkbox" value="唱歌">

唱歌
<input type="checkbox" name="hobby" id="checkbox2" value="跳舞">
跳舞
<input type="checkbox" name="hobby" id="checkbox3" value="画画">
画画
<input type="checkbox" name="hobby" id="checkbox4" value="运动">
运动

<input type="checkbox" name="all" id="all" value="全选" onClick="checkHobby()">
全选</td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">所属地：
<label for="checkbox"></label></td>
<td height="30" colspan="2" align="left" valign="middle" bgcolor="#99CCCC">省份：
<label for="select"></label>
<select name="province" id="province" class="inputstyle" onChange="changeCity()">
<option>--选择省份--</option>
</select>
城市：
<select name="city" id="city" class="inputstyle">
<option>--选择城市--</option>
</select></td>
</tr>
<tr>
<td height="30" colspan="3" align="center" valign="middle" bgcolor="#99CCCC"><input type="submit" name="submit" id="submit" value="submit提交"/>
<input type="button" name="button" id="submit" onclick="subMit('button提交');" value="button提交"/></td>
</tr>
</table>
</form>
</body>
</html>