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>