本篇文章背景是纯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]);
}
差不多就是这样，将同一元素的取值、备注信息、验证函数放在同一对象，由此对象完成一条龙服务，而不是将这一流程分成几部分、零散地去进行，这就是面向对象（此处金光闪闪）。
