JS实战 · 表单验证

思路：

        1、定义页面

            通过表格格式化表单；

            表格行都有自己的背景颜色；

            单元格中的数据(文本等)用div进行封装，好操作；

        2、定义样式

            表格的样式；

            div的样式；

        3、动态效果

            页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；

            进行内容校验，不正确时显示警告信息。

 

代码如下：

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>表单验证</title>

    <!-- 思路：

        1、定义页面

            通过表格格式化表单；

            表格行都有自己的背景颜色；

            单元格中的数据(文本等)用div进行封装，好操作；

        2、定义样式

            表格的样式；

            div的样式；

        3、动态效果

            页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；

            进行内容校验，不正确时显示警告信息。

     -->

    <style type="text/css">

        table{

            border: #A50DFA 1px solid;

            width: 500px;

            border-collapse: collapse;

        }

        table th, table td{

            border: #A50DFA 1px solid;

            padding:10px;

        }

        table th{

           

        }

        table td{

           

        }

        .errorinfo{

            color: #EA1508;

            font-family: "华文行楷";

            font-weight: bold;

            display: none;

        }

        .focus{

            border: #03F2FC 2px solid;

        }

        .outs{

            border: #81710D 1px solid;

        }

        .error{

            border: #FA0324 2px solid;

        }

    </style>

    <script type="text/javascript">

        function checkinput(input){

            input.className = "outs";

            input.onfocus = function(){

                this.className = "focus";

            }

        }

        /*窗口加载时就执行*/

        window.onload = function(){

            with(document.forms[0]){

                checkinput(user);

                checkinput(psw);

                checkinput(repsw);

                checkinput(mail);

            }

        }

        /*验证输入的数据*/

        /*方法一：每个输入框一个function，代码重复性高,舍弃不用。*/

        function checkDate(userNode){

            var value = userNode.value;

            var regex = /^\w{3,5}$/;

            var divNode = document.getElementById("userdiv");

            if(regex.test(value)){

                userNode.className = "outs";

                divNode.style.display = "none";

            }else{

                userNode.className = "error";

                divNode.style.display = "block";

            }

        }

        /*方法二*/

        function check(inputNode, regex, divId){

            var divNode = document.getElementById(divId);

            if(regex.test(inputNode.value)){

                inputNode.className = "outs";

                divNode.style.display = "none";

            }else{

                inputNode.className = "error";

                divNode.style.display = "block";

            }

        }

         /*验证用户名*/

        function checkUser(userNode){

            var regex = /^\w{3,5}$/;

            check(userNode, regex, "userdiv");

        }

          /*验证密码格式*/

        function checkPsw(pswNode){

            var regex = /^[a-z0-9]{4,8}$/i;

            check(pswNode, regex, "pswdiv");

        }

        /*验证两次密码是否一致*/

        function checkRepsw(repswNode){

            var psw = document.getElementById("psw").value;

            var repsw = repswNode.value;

            var divNode = document.getElementById("repswdiv");

            if(psw == repsw){

                repswNode.className = "outs";

                divNode.style.display = "none";

            }else{

                repswNode.className = "error";

                divNode.style.display = "block";

            }

        }

      /*验证邮箱*/

        function checkMail(mailNode){

            var regex = /^\w+@\w+(\.\w+)+$/;

            check(mailNode, regex, "maildiv");

        }

    </script>

</head>

<body>

    <form>

        <table>

            <tr>

                <th>用户注册</th>

            </tr>

            <tr>

                <td>

                    <div>用户名</div>

                    <div>

                        <input type="text" name="user" onblur="checkUser(this)"/>

                    </div>

                    <div class="errorinfo" id="userdiv">用户名填写错误。</div>

                    <div>用户名必须是3-5位，由字母(a-z)、数字(0-9)、下划线(_)组成</div>

                </td>

            </tr>

            <tr>

                <td>

                    <div>密码</div>

                    <div>

                        <input type="password" name="psw" id="psw" onblur="checkPsw(this)"/>

                    </div>

                    <div class="errorinfo" id="pswdiv">密码格式错误。</div><br/>

                    <div>确认密码</div>

                    <div>

                        <input type="password" name="repsw"  onblur="checkRepsw(this)"/>

                    </div>

                    <div class="errorinfo" id="repswdiv">两次输入密码不一致。</div>

                    <div>密码必须是4-8位，由字母(a-z)、数字(0-9)组成</div>

                </td>

            </tr>

            <tr>

                <td>

                    <div>邮箱</div>

                    <div>

                        <input type="text" name="mail" onblur="checkMail(this)"/>

                    </div>

                    <div class="errorinfo" id="maildiv">邮箱格式错误，请规范填写。</div>

                </td>

            </tr>

            <tr>

                <th><input type="button" value="提交数据" onclick="submitDate()"></th>

            </tr>

        </table>

    </form>

</body>

</html>