10-1 JS案例：表单校验

在开发中，我们经常需要对数据进行验证，例如：邮箱，会员名，密码等不能为空，会员名长度，密码长度需要符合规定，邮箱格式要正确等，那么我们这时就需要对表单中的数据进行校验。

前面我们已经学过了正则，以下我们在对表单数据进行验证时，就会使用到正则表达式，并且会使用上面提到过的dom来显示一些错误信息。

需求:

1.       验证邮箱符合规则，并且不能为空

2.       验证会员名密码不能为空，并且保证长度至少6位

3.       重复密码要与密码一致. 

分析:

1.       验证非空 /^\s*$/

2.       验证邮箱符合规则，正则表达式是: /^(\w)+@(\w)+(\.\w+)+$/

3.       验证会员名与密码长度至少6位 /^ (\w){6,}$/

4.       验证重复密码与密码一致，我们不需要使用正则，直接比较就可以。

5.       对于上述操作，我们在使用时，可以使用javascript中提供的test方法完成。

6.       为了保证数据不正确情况下，表单不能提交，我们需要使用onsubmit，如果绑定的函数返回的是false,表单就不能被提交    

实现:

<form name="Form1">
   email:<input type="text"name="email" id="email"/>
        <span id="email_msg"style="color:red;"></span><br/>
    username:<input type="text"name="username" id="username"/>
        <span id="username_msg" style="color:red;" ></span><br/>
    password:<input type="password"name="password" id="password"/>
        <span id="password_msg"style="color:red;" ></span><br/>
    comfirmpassword:<input type="password"name="repassword" id="repassword"/>
        <span id="repassword_msg"style="color:red;"></span><br/>
<input type="submit"onclick="return checkForm();" value="注册"/>
</form> 
<script type="text/javascript">
function checkForm(){
    //1.获取数据
    varemail=document.getElementById("email");
    varusername=document.getElementById("username");
    varpassword=document.getElementById("password");
    varrepassword=document.getElementById("repassword");  
 
    //2.验证非空
    if(checkNull(email.value)){
        //如果返回true,代表email为空
        document.getElementById("email_msg").innerHTML="邮箱不能为空";
        return false;
    }
    if(checkNull(username.value)){
        //如果返回true,代表email为空
        document.getElementById("username_msg").innerHTML="会员名不能为空";
        return false;
    }
    if(checkNull(password.value)){
        //如果返回true,代表email为空
        document.getElementById("password_msg").innerHTML="密码不能为空";
        return false;
    }
    if(checkNull(repassword.value)){
        //如果返回true,代表email为空
        document.getElementById("repassword_msg").innerHTML="重复密码不能为空";
        return false;
    }
   
    //3.验证邮箱符合规则
    if(!checkEmail(email.value)){
        //如果返回true,代表符合规则
        document.getElementById("email_msg").innerHTML="请输入有效的邮箱地址";
        return false;
    }
           
    //4.验证会员名或密码长度大于6位
    if(!checkLength(username.value)){
        document.getElementById("username_msg").innerHTML="会员名长度必须大于6位";
        return false;
    }
    if(!checkLength(password.value)){
        document.getElementById("password_msg").innerHTML="会员名长度必须大于6位";
        return false;
    }
    //5.验证两次输入密码一致
    if(password.value!=repassword.value){
        document.getElementById("repassword_msg").innerHTML="两次密码输入不一致";
        return false;
    }          
    return true;
}
//验证长度
function checkLength(data){
    varreg=/^\w{6,}$/;
    returnreg.test(data);
}
//验证邮箱
function checkEmail(data){
    varreg=/^(\w)+@(\w)+(\.\w+)+$/;
    returnreg.test(data);
}
//验证非空
function checkNull(data){
    var reg=/^\s*$/; //0个或多个空字符串
    returnreg.test(data);//如果data符合规则，返回true，否则返回false                    
}
</script>