/**
|
* H5表单验证 适用所有，当同时存在多个逻辑时 有先后顺序
|
* 注意：凡是设置了正则表达式验证的 需在后面指出具体规则以告知用户
|
* @author lautin
|
* @created 2019-11-22 14:14:20
|
*/
|
|
class Validate {
|
|
// 初始化验证元素
|
constructor(root) {
|
// 提取表单中的输入控件
|
if (!root.nodeType) root = document.querySelector(root);
|
|
// 将nodeList以及标识符 写入全局对象中
|
Object.assign(this, {
|
flag: true,
|
}, {
|
fields: this.extractInputs(root),
|
});
|
}
|
|
/**
|
* 遍历节点 提取输入控件
|
* @param {dom}} node
|
* @param {nodeList} result 返回DOM集合对象
|
*/
|
extractInputs(node, result = null) {
|
let fields = result || [];
|
const types = ["text", "password", "file", "number", "range", "search", "email", "url"];
|
|
for (let x = node.firstChild; x != null; x = x.nextSibling) {
|
// 如果是元素节点 则检测节点名称并递归
|
if (x.nodeType == node.ELEMENT_NODE) {
|
switch (x.nodeName.toLowerCase()) {
|
case "input":
|
if (types.includes(x.type)) {
|
if (getComputedStyle(x, false).display != "none") {
|
fields.push(x); //放入该节点
|
}
|
|
}
|
break;
|
case "select":
|
case "textarea":
|
fields.push(x); //放入该节点
|
break;
|
}
|
// 继续递归
|
this.extractInputs(x, fields);
|
}
|
}
|
return fields;
|
}
|
|
/**
|
* text验证maxLength和minLength
|
* @param {object} state
|
* @param {dom} item
|
*/
|
textTask(state, item) {
|
let result = '';
|
switch (true) {
|
case state.tooLong:
|
result = `${item.name} 不能超过${item.maxLength}位`;
|
break;
|
|
case state.tooShort:
|
result = `${item.name} 不能少于${item.minLength}位`;
|
break;
|
|
case state.patternMismatch:
|
result = item.dataset.message || item.placeholder || `输入不符合要求`;
|
break;
|
}
|
return result;
|
}
|
|
/**
|
* password验证pattern
|
* @param {object} state
|
*/
|
pwdTask(state, item) {
|
let result = '';
|
if (state.patternMismatch) {
|
result = item.dataset.message || `输入不符合规则要求`
|
}
|
return result;
|
}
|
|
/**
|
* number和range类型 先验证min和max，再验证step
|
* @param {object} state
|
* @param {dom} item
|
*/
|
numberTask(state, item) {
|
let result = '';
|
switch (true) {
|
case state.rangeOverflow:
|
result = `不能超出${item.max}的上限`;
|
break;
|
|
case state.rangeUnderflow:
|
result = `不能低于${item.min}的下限`;
|
break;
|
|
case state.stepMismatch:
|
result = item.dataset.message || `${item.value} 不是合法值，需要以${item.step}递增`;
|
break;
|
}
|
return result;
|
}
|
|
/**
|
* email和url类型 先验证type 再验证pattern
|
* @param {object} state
|
* @param {dom} item
|
*/
|
emailAndUrl(state, item) {
|
let result = '';
|
switch (true) {
|
case state.typeMismatch: // 适合number、email、url
|
result = item.dataset.message || item.placeholder || `${item.name} 格式不正确`;
|
break;
|
|
case state.patternMismatch:
|
result = item.dataset.message || item.placeholder || `输入不符合规则要求`;
|
break;
|
}
|
return result;
|
}
|
|
/**
|
* 执行验证的方法
|
*/
|
validate() {
|
[...this.fields].reverse().forEach((item) => {
|
// 验证通过 则跳过本次循环
|
if (item.checkValidity()) return;
|
// 返回validityState对象
|
let state = item.validity,
|
message = '';
|
|
// 首先检测值是否为空
|
if (state.valueMissing) {
|
message = item.dataset.has || item.placeholder || `${item.name} 不能为空`;
|
} else {
|
// 根据类型执行不同验证
|
switch (item.type) {
|
case "text":
|
case "search":
|
message = this.textTask(state, item);
|
break;
|
case "password":
|
message = this.pwdTask(state, item);
|
break;
|
case "number":
|
case "range":
|
message = this.numberTask(state, item);
|
break;
|
case "email":
|
case "url":
|
message = this.emailAndUrl(state, item);
|
break;
|
}
|
}
|
|
// 未知的类型验证
|
if (state.badInput) {
|
message = `输入了的值无效`;
|
}
|
|
//设置验证提示信息
|
item.setCustomValidity(message);
|
|
if (message) {
|
|
// 手动报告验证的结果 触发元素的focus事件 等待用户输入
|
item.reportValidity();
|
// 如果用户有输入 则清除提示信息，最好监听change 避免破坏原有的v-model
|
item.addEventListener("change", function () {
|
|
this.blur();
|
})
|
|
this.flag = false;
|
}
|
|
});
|
|
return this.flag;
|
}
|
|
/**
|
* 调用执行的静态方法
|
* @param {dom} root
|
*/
|
static start(root) {
|
const obj = new Validate(root);
|
return obj.validate();
|
}
|
}
|
|
export default Validate.start;
|
