< 笔记 > DOM - 04 DOM 表单校验

本文链接：https://blog.csdn.net/weixin_38689154/article/details/78201037

04 DOM 表单校验

By Kevin Song

JavaScript中的正则表达式

格式一

re = /pattern/[flags]

格式二

re = new RegExp("pattern",["flags"])

表单提交的两种方式

方式一
- 标签中
  - 内部按钮提交
方式二
- 自定义按钮
  - 调用方法，调用form节点对象的submit方法提交

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Document</title>
    </head>
    <body>
        <!--
        表单校验
        -->
        <script type="text/javascript">
            /*
            //校验用户名
            function checkUser(){
                var flag;//判断方法是否正确
                var oUserNode = document.getElementsByName("user")[0];
                var name = oUserNode.value;
                var oSpanNode = document.getElementById("userspan");

                //定义正则表达式
                var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母

//              reg =  new RegExp("^\\d{4}$");//必须是四个数字
//              reg = /^\d{4}$/;


                if(reg.test(name)){
                    oSpanNode.innerHTML = "正确".fontcolor("green");
                    flag = true;
                }else{
                    oSpanNode.innerHTML = "错误".fontcolor("red");
                    flag = false;
                }
                return flag;
            }
            */
            /*
             *对四种校验进行代码提取
             * 
             */
             //四个不确定的信息：name，正则校验表达式，正确信息，不正确信息。
            function check(name,reg,spanId,okinfo,errinfo){
                var flag;               
                var val = document.getElementsByName(name)[0].value;
                var oSpanNode = document.getElementById(spanId);

                if(reg.test(val)){
                    oSpanNode.innerHTML = okinfo.fontcolor("green");
                    flag = true;
                }else{
                    oSpanNode.innerHTML = errinfo.fontcolor("red");
                    flag = false;
                }               
                return flag;
            }
            //校验用户名
            function checkUser(){
                var reg = /^[a-z]{4}$/i;
                return check("user",reg,"userspan","用户名正确","用户名不正确");
            }
            //校验密码
            function checkPsw(){
                var reg  = /^\d{4}$/;
                return check("psw",reg,"pswspan","密码格式正确","密码格式不正确")
            }
            //校验确定密码：只要和密码一致即可
             function checkRepsw(){
                var flag;
                //获取密码框内容   
                var pass  = document.getElementsByName("psw")[0].value
                //获取确认密码框内容
                var repass  = document.getElementsByName("repsw")[0].value;
                //获取确认密码的span区域
                var oSpanNode = document.getElementById("repswspan");
                if(pass==repass){
                    oSpanNode.innerHTML = "两次密码一致.fontcolor("green");
                    flag = true;
                }else{
                    oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");
                    flag = false;
                }           
                return flag;
             }
            //校验邮件
            function checkMail(){
                var reg = /^\w+@\w+(\.\w+)+$/i;
                return check("mail",reg,"mailspan","邮箱格式正确","邮箱格式错误");
            }
            //提交事件处理
            function checkForm(){
//              alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());
                if(checkUser() && checkPsw() && checkRepsw() && checkMail())
                    return true;
                return false;
            }
            //拿取表单对象，调用对象的submit()方法也可以提交
            function mySubmit(){

                var oFormNode = document.getElementById("userinfo");

                oFormNode.submit();
            }
        </script>
        <form id="userinfo" onsubmit="return checkForm()">

            用户名称<input type="text" name="user" onblur="checkUser()" />
            <span id="userspan"></span>
            <br/>

            密码<input type="text" name="psw" onblur="checkPsw()"  />
            <span id="pswspan"></span>
            <br/>

            密码确认<input type="text" name="repsw" onblur="checkRepsw()" />
            <span id="repswspan"></span>
            <br/>

            邮箱<input type="text" name="mail" onblur="checkMail()"  />
            <span id="mailspan"></span>
            <br/>
            //提交方式一
            <input type="submit" value="Submit" />
        </form>
        <hr/>
        <!--提交方式二-->
        <input type="button" value="MySubmit" onclick="mySubmit()" />
    </body>
</html>