表单正则验证Demo

先目睹下页面吧ヾ(๑╹◡╹)ﾉ"

在这里插入图片描述

主要技术点：
输入框为空时提示该项为空；
输入框错误时提示该项错误；
只有各项都符合要求，才能提交，否则提示；
重置后各项都为空，相应的提示也消失。

HTML代码：

<body>
    <div id="div-id">
        <h1>个人信息登记表</h1>
        <!-- 各项放到表格里，看着整齐 -->
        <!-- 提交和重置按钮不能直接加事件，可以在form表单增加onsubmit或onreset -->
        <form action="success.html" name="myform" onsubmit="return doSubmit()" onreset="doReset()" method="POST">
            <table>
                <tr>
                    <td>登录账号：</td>
                    <td><input type="text" class="text-class" name="uname" onblur="checkUname()"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>登录密码：</td>
                    <td><input type="password" class="text-class" name="pass" onblur="checkPass()"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>重复密码：</td>
                    <td><input type="password" class="text-class" name="againpass" onblur="checkAgainpass()"></td>
                    <td></td>
                </tr>
                <tr>
                    <!-- &emsp;刚好占据一个中文宽度 -->
                    <td>性&emsp;&emsp;别：</td>
                    <td>
                        <input type="radio" name="sex" value="0" onclick="checkSex()">&nbsp;男&emsp;
                        <input type="radio" name="sex" value="1" onclick="checkSex()">&nbsp;女
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>年&emsp;&emsp;龄：</td>
                    <td><input type="text" class="text-class" name="age" onblur="checkAge()"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>手机号码：</td>
                    <td><input type="text" class="text-class" name="tel" onblur="checkTel()"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>邮&emsp;&emsp;箱：</td>
                    <td><input type="text" class="text-class" name="email" onblur="checkEmail()"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>学&emsp;&emsp;历：</td>
                    <td>
                        <select name="education" id="select-id" onclick="checkEdu()">
                            <option value="">请选择</option>
                            <option value="1">博士</option>
                            <option value="2">硕士</option>
                            <option value="3">本科</option>
                            <option value="4">大专</option>
                            <option value="5">高中</option>
                            <option value="6">初中</option>
                            <option value="7">小学</option>
                        </select>
                    </td>
                    <td></td>
                </tr>
            </table>
            <input type="submit" value="提交" id="submit-id">
            <input type="reset" value="重置" id="reset-id">
        </form>
    </div>
</body>

CSS代码：

<style>
    * {
    
    
        margin: 0px;
        padding: 0px;
    }

    body {
    
    
        background-color: rgb(255, 249, 249);
    }

    h1 {
    
    
        text-align: center;
        color: rgba(250, 54, 129, 0.562);
    }

    #div-id {
    
    
        width: 520px;
        margin: 60px auto;
        padding: 30px;
        border: 2px dashed #ddd;
        background-color: rgb(255, 240, 240);
        border-radius: 20px;
    }

    tr td {
    
    
        /* 内边距，不是外边距 */
        padding-top: 20px;
    }

    /* 第一列 */
    tr td:first-child {
    
    
        font-size: 17px;
    }

    /* 第三列 */
    tr td:nth-child(3) {
    
    
        padding-left: 12px;
        font-size: 13px;
    }

    td .text-class {
    
    
        border: 1px solid #ddd;
        height: 22px;
        width: 180px;
        outline: 0;
        /* 光标向右移 */
        padding-left: 5px;

    }

    #select-id {
    
    
        width: 100px;
        height: 25px;
        border: 1px solid #ddd;
        outline: 0;
    }

    #submit-id,
    #reset-id {
    
    
        width: 60px;
        height: 30px;
        border: 1px solid transparent;
        outline: 0;
        cursor: pointer;
        font-size: 15px;
        margin-top: 30px;
        margin-left: 50px;
        background-color: #cecece;
        box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.4);
    }

    #submit-id:hover,
    #reset-id:hover {
    
    
        color: #fff;
    }
</style>

JavaScript代码：

<script>
    //验证错误后提示的变化
    function error(str, tip) {
    
    
        tip.style.color = "rgba(255, 65, 65, 0.623)";
        str.style.border = "2px solid #ADD8E"
        // 鼠标再次获得焦点，提示为空，输入框为空
        str.onfocus = function () {
    
    
            str.value = "";
            tip.innerHTML = "";
        }
    }

    //验证成功后提示的变化
    function success(str, tip) {
    
    
        tip.innerHTML = "√";
        tip.style.color = "#333";
        // 鼠标再次获得焦点，提示为空
        str.onfocus = function () {
    
    
            tip.innerHTML = "";
        }
    }

    //验证为空时
    function strNull(str, tip) {
    
    
        tip.style.color = "rgba(255, 65, 65, 0.623)";
        // 鼠标再次获得焦点，提示为空，输入框为空
        str.onfocus = function () {
    
    
            str.value = "";
            tip.innerHTML = "";
        }
    }

    //验证登录账号
    function checkUname() {
    
    
        //获取账号
        var uname = document.myform.uname;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[0].getElementsByTagName("td")[2];

        //执行验证(\w表示字母、数字、下划线  {6,18}表示6~18位)
        if (uname.value != "") {
    
    
            if (uname.value.match(/^\w{6,18}$/) == null) {
    
    
                tip.innerHTML = "6~18位有效字符(字母、数字、下划线)";
                error(uname, tip);
                return false;
            } else {
    
    
                success(uname, tip);
                return true;
            }
            //输入框为空时提醒
        } else {
    
    
            tip.innerHTML = "账号不能为空！";
            strNull(uname, tip);
            return false;
        }
    }

    //验证登录密码
    function checkPass() {
    
    
        //获取密码
        var pass = document.myform.pass;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[1].getElementsByTagName("td")[2];

        //执行验证(6~18位任意字符)
        if (pass.value != "") {
    
    
            if (pass.value.match(/[\s\S]{6,18}/) == null) {
    
    
                tip.innerHTML = "6~18位任意字符";
                error(pass, tip);
                return false;
            } else {
    
    
                success(pass, tip);
                return true;
            }
            //输入框为空时提醒
        } else {
    
    
            tip.innerHTML = "密码不能为空！";
            strNull(pass, tip);
            return false;
        }
    }

    //验证重复密码
    function checkAgainpass() {
    
    
        //获取重复密码
        var againpass = document.myform.againpass;
        //获取密码
        var pass = document.myform.pass;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[2].getElementsByTagName("td")[2];

        //执行验证
        if (againpass.value != "") {
    
    
            if (againpass.value != pass.value) {
    
    
                tip.innerHTML = "两次密码不一致";
                error(againpass, tip);
                return false;
            } else {
    
    
                success(againpass, tip);
                return true;
            }
            //输入框为空时提醒
        } else {
    
    
            tip.innerHTML = "重复密码不能为空！";
            strNull(againpass, tip);
            return false;
        }
    }

    //验证性别
    function checkSex() {
    
    
        //获取性别
        var sex = document.myform.sex;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[3].getElementsByTagName("td")[2];

        //执行验证
        if (sex.value == "0" || sex.value == "1") {
    
    
            success(sex, tip);
            return true;
        } else {
    
    
            tip.innerHTML = "必须选择一个";
            strNull(sex, tip);
            return false;
        }
    }

    //验证年龄
    function checkAge() {
    
    
        //获取年龄
        var age = document.myform.age;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[4].getElementsByTagName("td")[2];

        //执行验证
        if (age.value != "") {
    
    
            if (age.value == 0 || age.value.match(/^[0-9]{2}$/) == null) {
    
    
                tip.innerHTML = "大于0的任意两位整数";
                error(age, tip);
                return false;
            } else {
    
    
                success(age, tip);
                return true;
            }
            //输入框为空时提醒
        } else {
    
    
            tip.innerHTML = "年龄不能为空！";
            strNull(age, tip);
            return false;
        }
    }


    //验证手机号
    function checkTel() {
    
    
        //获取手机号
        var tel = document.myform.tel;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[5].getElementsByTagName("td")[2];

        //执行验证
        if (tel.value != "") {
    
    
            if (tel.value.match(/^[1][0-9]{10}$/) == null) {
    
    
                tip.innerHTML = "由1开头的11位整数";
                error(tel, tip);
                return false;
            } else {
    
    
                success(tel, tip);
                return true;
            }
            //输入框为空时提醒
        } else {
    
    
            tip.innerHTML = "手机号不能为空！";
            strNull(tel, tip);
            return false;
        }
    }



    //验证邮箱
    function checkEmail() {
    
    
        //获取邮箱
        var email = document.myform.email;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[6].getElementsByTagName("td")[2];

        //执行验证
        if (email.value != "") {
    
    
            if (email.value.match(/^\w+@\w+(\.\w+){1,2}$/) == null) {
    
    
                tip.innerHTML = "请输入有效的Email地址";
                error(email, tip);
                return false;
            } else {
    
    
                success(email, tip);
                return true;
            }
            //输入框为空时提醒
        } else {
    
    
            tip.innerHTML = "邮箱不能为空！";
            strNull(email, tip);
            return false;
        }
    }

    //验证学历
    function checkEdu() {
    
    
        //获取学历
        var education = document.myform.education;
        //获取提示信息
        var tip = document.getElementsByTagName("tr")[7].getElementsByTagName("td")[2];

        //执行验证
        if (education.value == "1" || education.value == "2" || education.value == "3"
            || education.value == "4" || education.value == "5" || education.value == "6"
            || education.value == "7") {
    
    
            success(education, tip);
            return true;
        } else {
    
    
            tip.innerHTML = "必须选择一个学历";
            strNull(education, tip);
            return false;
        }
    }


    //表单提交
    function doSubmit() {
    
    
        return checkUname() && checkPass() && checkAgainpass() && checkSex() && checkAge() && checkTel() && checkEmail() && checkEdu();
    }

    //点击重置，清空提示
    function doReset() {
    
    
        //获取提示信息
        var tip = document.getElementsByTagName("tr");
        for (var i = 0; i < tip.length; i++) {
    
    
            tip[i].getElementsByTagName("td")[2].innerHTML = "";
        }
    }

</script>

猜你喜欢