首页 > 代码库 > JS实战 · 表单验证

JS实战 · 表单验证

2024-08-26 11:22:55   221人阅读

思路：
        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 = http://www.mamicode.com/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="http://www.mamicode.com/提交数据" onclick="submitDate()"></th>
            </tr>
        </table>
    </form>
</body>
</html>
 
 
 
 
技术分享
 
技术分享

JS实战 · 表单验证


联系
我们