简化表单验证（面对对象编程）-优快云博客

本文介绍了一种使用面向对象编程方法简化表单验证的方案，通过将输入元素、验证逻辑和反馈信息封装到单一对象中，实现了表单验证的模块化和易于维护。

本篇文章背景是纯html开发，无任何框架，无状态管理。也可迁移到框架开发。

表单操作一直都是前端的一大复杂点，很繁琐。如果用传统的面向过程思维去编写表单验证逻辑，不便于维护，感觉逻辑很散。做了好几个项目，都需要填写表单并验证，于是我将逻辑抽离，代码如下。
这里是html：

<body>
    <form action="#" method="post">
        <div>
            <label for="phone">手机号：</label>
            <input id="phone" type="text">
            <span id="phoneMsg"></span>
        </div>
        <div>
            <label>验证码：</label>
            <input id="code" type="text">
            <span id="codeMsg"></span>
        </div>
        <div>
            <label>创建密码：</label>
            <input id="pwd" type="password">
            <span id="pwdMsg"></span>
        </div>
        <div>
            <table id="pwdLevel">
                <tr>
                    <td>
                        <div></div><span>弱</span>
                    </td>
                    <td>
                        <div></div><span>中</span>
                    </td>
                    <td>
                        <div></div><span>强</span>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <label>确认密码：</label>
            <input id="confirmPwd" type="password">
            <span id="confirmPwdMsg"></span>
        </div>
        <div>
            <input type="submit" value="同意并提交">
        </div>
    </form>
</body>
复制代码

下面是js文件：

let inputList = {
    phoneObj: {
        element: document.getElementById("phone"),//input的内容
        elementMsg: document.getElementById("phoneMsg"),//备注信息 
        flag: false,//是否符合格式，是否通过validate验证
        validate: function () {
            return this.element.value && /^1\d{10}$/.test(this.element.value);
        },
    },
    codeObj: {
        element: document.getElementById("code"),
        elementMsg: document.getElementById("codeMsg"),
        flag: false,
        validate: function () {
            return /^\d{6}$/.test(this.element.value);
        },
    },
    pwdObj: {
        element: document.getElementById("pwd"),
        elementMsg: document.getElementById("pwdMsg"),
        flag: false,
        validate: function () {
            return /^.{6,}$/.test(this.element.value);
        }
    },
    confirmObj: {
        element: document.getElementById("confirmPwd"),
        elementMsg: document.getElementById("confirmPwdMsg"),
        flag: false,
        validate: function () {
            return this.element.value && inputList.pwdObj.element.value == this.element.value;
        }
    }
};

let validate = function (obj) {
    obj.element.onblur = function () {
        if (obj.validate()) {
            obj.elementMsg.innerText = "√";
            obj.elementMsg.style.color = "green";
            obj.flag = true;
        } else {
            obj.elementMsg.innerText = "格式错误";
            obj.elementMsg.style.color = "red";
            obj.flag = false;
        }
    }
}
for(let item in inputList){
    validate(inputList[item]);
}
复制代码