Demo_javascript_注册表单校验

对于一个注册页面，将表单中的数据提交到action指定的位置,在开发中，需要对数据进行验证，例如：邮箱，会员名，密码等不能为空，会员名长度，密码长度需要符合规定，邮箱格式要正确等，那么我们这时就需要对表单中的数据进行校验。

需求:
1. 验证邮箱符合规则，并且不能为空
2. 验证会员名密码不能为空，并且保证长度至少6位
3. 重复密码要与密码一致.

分析:

验证非空  /^\s*$/
验证邮箱符合规则，正则表达式是: /^(\w)+@(\w)+(\.\w+)+$/
验证会员名与密码长度至少6位 /^ (\w){6,}$/
验证重复密码与密码一致，我们不需要使用正则，直接比较就可以。
对于上述操作，我们在使用时，可以使用javascript中提供的test方法完成。
为了保证数据不正确情况下，表单不能提交，我们需要使用onsubmit，如果绑定的函数返回的是false,表单就不能被提交    

实现：

<script type="text/javascript">
            function checkForm(){
                //1.获取数据
                var email=document.getElementById("email");
                var username=document.getElementById("username");
                var password=document.getElementById("password");
                var repassword=document.getElementById("repassword");               
                //2..验证非空
                if(checkNull(email.value)){
                    //如果返回true,代表email为空
                    document.getElementById("email_msg").innerHTML="<font color='red'>邮箱不能为空</font>";
                    return false;
                }
                if(checkNull(username.value)){
                    //如果返回true,代表email为空
                    document.getElementById("username_msg").innerHTML="<font color='red'>会员名不能为空</font>";
                    return false;
                }
                if(checkNull(password.value)){
                    //如果返回true,代表email为空
                    document.getElementById("password_msg").innerHTML="<font color='red'>密码不能为空</font>";
                    return false;
                }
                if(checkNull(repassword.value)){
                    //如果返回true,代表email为空
                    document.getElementById("repassword_msg").innerHTML="<font color='red'>重复密码不能为空</font>";
                    return false;
                }
                //3.验证邮箱符合规则 
                if(!checkEmail(email.value)){
                    //如果返回true,代表符合规则
                    document.getElementById("email_msg").innerHTML="<font color='red'>请输入有效的邮箱地址</font>";
                    return false;
                }

                //4.验证会员名或密码长度大于6位
                if(!checkLength(username.value)){
                    document.getElementById("username_msg").innerHTML="<font color='red'>会员名长度必须大于6位</font>";
                    return false;
                }
                if(!checkLength(password.value)){
                    document.getElementById("password_msg").innerHTML="<font color='red'>会员名长度必须大于6位</font>";
                    return false;
                }
                //5.验证两次输入密码一致
                if(password.value!=repassword.value){
                    document.getElementById("repassword_msg").innerHTML="<font color='red'>两次密码输入不一致</font>";
                    return false;
                }

                return true;
            }
            //验证长度
            function checkLength(data){
                var reg=/^\w{6,}$/;
                return reg.test(data);
            }
            //验证邮箱
            function checkEmail(data){
                var reg=/^(\w)+@(\w)+(\.\w+)+$/;
                return reg.test(data);
            }
            //验证非空
            function checkNull(data){
                var reg=/^\s*$/; //0个或多个空字符串
                return (reg.test(data))//如果data符合规则，返回true，否则返回false                

            }
</script>