前言
validator用于做复杂的验证，当其他简单的验证规则无法满足要求时，就要用到这个方法了。
官方网站：https://github.com/yiminghe/async-validator
NPMJS.COM：https://www.npmjs.com/package/async-validator
注意：Element UI使用的async-validator版本非常低，并没有asyncValidator函数，不过validator函数也足够用了。
参数
validator的参数有：(rule, value, callback, source, options)，前三个比较重要。
rule：指向该条规则对象。
value：新的值，用于参与运算、对比。
-
callback：执行回调，使用方法是：
callback('...');。如果不传参：表示验证通过，一般不必专门强调。
如果传入值：字符串会作为错误提示，但是显示优先级低于外层的
message。比如callback('嘻嘻嘻');跟message: '哈哈哈'同时存在，则会提示哈哈哈。
source：是一个对象，结构类似
{completionTime: "2020-08-09"}，也就是键值对。因为跟value的值一致，所以source可以不用。-
options：额外配置项
first {Boolean值}：true则表示第一个未通过校验的字段发生错误就调用 callback，即不再继续校验剩余字段
-
firstFields {Boolean/StringArray值}：多条校验规则的配置
Boolean：每个字段的第一个规则发生错误就调用 callback，即不再继续校验该字段的剩余规则
StringArray：指定字段的第一个规则发生错误就调用 callback
suppressWarning {Boolean}：是否禁止无效值的内部警告
案例1
现在有2个输入框，前一个是“开工时间”，后一个是“完工时间”，完工时间应晚于开工时间。
startTime: [
{ required: true, message: "开工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() >= new Date(this.form.completionTime).getTime()) {
callback('');
}
}, message: "开工时间应早于竣工时间", trigger: "blur" },
],
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() <= new Date(this.form.startTime).getTime()) {
callback('');
}
}, message: "竣工时间应晚于开工时间", trigger: "blur" },
],
案例2
现在我进一步要求，如果开工时间等于竣工时间，则提示“开工时间与竣工时间不能同一天”。
这个案例用于展示多个回调，此时应该删除message：
startTime: [
{ required: true, message: "开工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() > new Date(this.form.completionTime).getTime()) {
callback('开工时间应早于竣工时间');
} else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
callback('开工时间与竣工时间不能同一天');
}
}, trigger: "blur" },
],
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ type: 'date', validator: (rule, value, callback, source, options) => {
if (new Date(value).getTime() < new Date(this.form.startTime).getTime()) {
callback('竣工时间应晚于开工时间');
} else if (new Date(value).getTime() === new Date(this.form.completionTime).getTime()) {
callback('开工时间与竣工时间不能同一天');
}
}, trigger: "blur" },
],
案例3
这次考虑Promises异步。如果返回一个Promise对象，则其中必须有reject或callback抛出错误值，才会在界面上报错：
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ required: true,
validator: (rule, value, callback) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('test'); // 或者写 callback('test') 也可以实现报错
}, 2000);
});
},
trigger: "blur"
},
],
案例4
这次考虑非Promises异步。比如就一个setTimeout，此种情况必须用callback抛出错误：
completionTime: [
{ required: true, message: "竣工时间不能为空", trigger: "blur" },
{ required: true,
validator: (rule, value, callback) => {
setTimeout(() => {
callback('test');
}, 2000);
},
trigger: "blur"
},
],
案例5
有楼号、房间号，房间号必须以楼号开头，中间必须有0。
floor: [
{ required: true, message: '楼层不能为空', trigger: 'blur' },
{ validator: (rule, value, callback, source, options) => {
if (value[0] === '0') {
callback('首位不得为0');
} else if (value > 99) {
callback('楼层不得超过99');
} else if (this.form.roomNumber && !new RegExp('^' + value).test(this.form.roomNumber)) {
callback('房间号前需加楼层，例如：' + value + '02');
} else {
callback();
}
}, trigger: "blur" },
],
roomNumber: [
{ required: true, message: '房间号不能为空', trigger: 'blur' },
{ validator: (rule, value, callback, source, options) => {
if (!this.form.floor) {
callback('请先填写楼层');
} else if (value.length > 4) {
callback('房间号最多4位');
} else if (!new RegExp('^' + this.form.floor).test(value)) {
callback('房间号前需加楼层，例如：' + this.form.floor + '02');
} else if (value.slice(-2, -1)[0] !== '0') {
callback('房间号倒数第二位需是0，例如：' + this.form.floor + '02');
} else {
callback();
}
}, trigger: "blur" },
]