DHTML技术演示---注册表单的验证且控制提交--前端校验（模拟网上账号注册）

本文介绍了一种前端表单验证的方法，通过JavaScript实现对用户名、密码、邮箱等字段的格式检查，确保用户输入的数据符合要求后再提交到后台。

前端校验（模拟网上账号注册）
账号，密码，密码确认，邮箱。
必须全部输入正确才可以提交后台，而我们的任务是验证前台输入的数据是否符合格式要求，这样判断它要不要提交后台。
如图：
这里写图片描述
有两种方式：

通过注册onsubmit事件响应来控制表单的提交，如果return false则不会提交，而return true则会提交。如果不注册即是return true
通过来点击触发事件，然后调用form.submit()方法直接提交

下面演示代码：

<!DOCTYPE html>
<html>
  <head>
    <title>DHTML技术演示---表单验证</title>
    <style type="text/css">
        table td{
            text-align:right;
        }

    </style>
    <script type="text/javascript">
        function check(name,reg,spanId,okInfo,errorInfo){//代码复用
            var str=document.getElementsByName(name)[0].value;
            if(reg.test(str)){
                document.getElementById(spanId).innerHTML=okInfo.fontcolor("green");
                return true;
            }else{
                document.getElementById(spanId).innerHTML=errorInfo.fontcolor("red");
                return false;
            }
        }
        function checkUserName(){
            var reg =new RegExp("[a-z]{4}","i") ;//包含4个连续的字母,注意"i"中的双引号不能省略,i是忽略大小写
            return check("userName",reg,"userNameSpan","用户名格式正确","用户名格式错误,长度必须为4个字符");
        }
        function checkPwdName(){
            var reg=new RegExp("^[a-zA-Z]{1}\\w{5,8}$","");
            return check("pwd",reg,"pwdSpan","格式正确","密码格式不对,必须与英文开头 ，长度必须不能小于6-9个字符");
        }
        function checkPwdName2(){//判断第2个密码和第1个是否相同
            var pwd2=document.getElementsByName("pwd2")[0].value;
            var pwd=document.getElementsByName("pwd")[0].value;
            if(pwd2==pwd){
                document.getElementById("pwd2Span").innerHTML="两次输入密码一致".fontcolor("green");
                return true;
            }else{
                document.getElementById("pwd2Span").innerHTML="两次输入密码不一致，请重新输入".fontcolor("red");
                return false;
            }
        }

        function checkMail(){//验证邮箱
            //var reg = /^\w+@\w+(\.\w+)+$/i;
            var reg=new RegExp("([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([a-zA-Z0-9\\-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)","");
            return check("mail",reg,"mailSpan","格式正确","邮箱格式错误！");
        }
        function checkUser(){//总体提交验证，这种框架比较好
            if(checkUserName()&&checkPwdName()&&checkPwdName2()&&checkMail()){//全部满足才能提交
                return true;
            }else{
                return false;
            }
        }

        //222按钮注册的步骤同表单注册，只不过走的是底层
        function btnCheck(){
            if(checkUserName()&&checkPwdName()&&checkPwdName2()&&checkMail()){//全部满足才能提交
                var oFormNode=document.getElementById("form1");
                oFormNode.submit();
            }else{
                alert("你输入的账户有问题请更正");
            }
        }
    </script>
  </head>

  <body>
        <form  id="form1" action="/dhtml/servlet/RegServlet" onsubmit="return checkUser()" method="post">
        <table>
            <caption>XX账号注册</caption>
        <tr>
         <td> 姓名：</td><td><input type="text" name="userName" onblur="checkUserName()"></td> <td> <span id="userNameSpan"></span></td>
        </tr>
        <tr>
        <td>密码：</td><td><input type="password" name="pwd" onblur="checkPwdName()"></td><td><span id="pwdSpan"></span></td>
        </tr>
        <tr>
        <td>确认密码：</td><td><input type="password" name="pwd2" onblur="checkPwdName2()"></td><td><span id="pwd2Span"></span></td>
        </tr>
        <tr>
             <td> 邮箱：</td><td><input type="text" name="mail" onblur="checkMail()"></td> <td> <span id="mailSpan"></span></td>
         </tr>
         <tr><td  style="text-align:center;"><input type="submit" value="注册"></td>
         <!--222下面是按钮注册，利用的是底层原理-->
         <td  style="text-align:center;"><input type="button" value="按钮注册" onclick="btnCheck()"></td></tr>
        </table>
        </form>
  </body>
</html>