js表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            margin: 0 auto;
        }

        .errors {
            width: 10px;
            height: 10px;
            background-color: #f5b445;
        }

        .esa {
            width: 100px;
            height: 100px;
            background-color: #4587f5;
        }
        .success{
            width: 100px;
            height: 100px;
            background-color: #0cd952;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>用户名称：</th>
        <td>
            <input type="text" name="username" placeholder="长度4~12，英文大小写字母">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>密码：</th>
        <td>
            <input type="text" name="password" type="password" placeholder="长度6~20,大小写字母，数字，下划线">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>确认密码：</th>
        <td>
            <input type="text" name="repwd" type="password" placeholder="再次输入密码进行确认">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>手机号码：</th>
        <td>
            <input type="text" name="tel" placeholder="13，14，15，17，18开头的11位手机号">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <th>电子邮箱：</th>
        <td>
            <input type="text" name="email" placeholder="用户名@域名（域名后辍至少2个字符）">
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr>
        <td colspan="3"><input type="submit" value="注册"></td>
    </tr>
</table>
<!--<div class="esa" id="es">qingshuru</div>-->
</body>
</html>
<script>
    const es = document.getElementById('es')
    // 添加事件
    //    获取所有的input元素
    const inputs = document.getElementsByTagName('input');
    //   为每个input元素添加失去焦点事件
    for (let i = 0; i < inputs.length - 1; i++) {
        inputs[i].onblur = inputBlur;
    }

    //  编写inputBlur()事件处理函数   编写inputBlur事件处理函数，获取对应input元素的验证规则和提示信息，对用户输入的内容进行验证，并将验证结果显示到HTML页面上，具体代码如下
    function inputBlur() {
        const name = this.name;//获取输入框的name值
        let val = this.value;//获取输入框的value值
        const tips = this.pl;//获取输入框的placeholder提示信息
        //    获取提示信息显示的div元素对象
        const tips_obj = this.parentNode.nextSibling.firstChild;
        //    去掉两端的空白符
        val = val.trim()
        //    文本框内容为空,给出提示信息
        if (!val) {
            error(tips_obj, '输入框不能为空');
            return false;
        }
        // 获取正则匹配规则和提示信息
        const reg_msg = getRegMsg(name, tips);//用于调用自定义函数getRegMsg()获取该文本框对应的正则和自定义的提示信息。
        console.log(reg_msg)//测试getRegMsg函数


    //   表单验证
        if(reg_msg['reg'].test(val)){
        //    匹配成功，显示成功的提示信息
        success(tips_obj,reg_msg['msg']['success']);
        }else {
        //    匹配失败，显示失败的提示信息
            error(tips_obj,reg_msg['msg']['success'])
        }
    }

    //创建显示错误信息的error函数，该函数的第1个参数表示显示提示信息的元素对象，第2个参数为自定义的错误提示信息，具体代码如下
    function error(obj, msg) {//显示验证失败提示信息
        obj.className = "errors";//将错误信息提示的class设置为error
        obj.innerHTML = msg + ',请重新输入';
    }

    //    获取验证规则和提示信息
    //    编写 getRegMsg()函数，根据input的name属性值获取不同状态下的正则匹配模型式，同时传入文本框中默认的提示信息，作为验证失败的一个提示信息。
    //    正则表达式所表达的为placeholder默认值
    function getRegMsg(name, tips) {
        let reg = '';
        let msg = '';
        switch (name) {
            case 'username':
                reg = /^[a-zA-Z]{4,12}$/;
                msg = {'success': '用户名输入正确', 'error': tips};
                break;
            case 'password':
                reg = /^\w{6,20}$/;
                msg = {'success': '密码输入正确', 'error': tips};
                break;
            case 'repwd':
                const con = document.getElementsByTagName('input')[1].value;
                reg = RegExp('^' + con + '$');
                msg = {'success': '两次输入的密码一致', 'error': tips};
                break;
            case 'tel':
                reg = /^1[34578]\d{9}$/;
                msg = {'success': '手机号码输入正确', 'error': tips};
                break;
            case 'email':
                reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
                msg = {'success': '邮箱输入正确', 'error': tips};
                break;
        }
        return {'reg': reg, 'msg': msg};
    }

    //   编写成功函数；实现验证通过的提示信息
    function success(obj, msg) {
        obj.success = 'success';
        obj.innerHTML = msg;
    }

</script>