感谢：尤大大的 vue、有赞的 vant、async-validator、以及 asseek

链接：https://www.jianshu.com/p/d58fe749b97f

在下不才在 asseek 的基础上加入了一些自己的想法有了现在的版本。
抛砖引玉请多多提点。

修正内容：

1. Promise 代替 callback

2. 添加 Proxy 实现校验的自动触发

3. 精简部分代码以期降低阅读难度

目的：

自动校验、手动校验、校验错误信息展示

规则声明：

<van-field :error-message="validator.ErrMsg.telNumber" v-model="formData.telNumber"
required clearable label="手机号"
icon="question" placeholder="请填写正确有效的手机号"
@click-icon="$toast('请填写正确有效的手机号')" />

data:()=>({
// 验证对象
validator: undefined,
// 表单数据源
formData: {
// 车牌号
carNumber: '鲁B',
// 手机号
telNumber: undefined
},
// 校验
rules: {
carNumber: [
{ required: true, message: '请输入鲁B/鲁U开头完整车牌号' },
{
validator: (rule, value, callBack) => {
/^[鲁]{1}[B|U]{1}[A-Z0-9]{5,6}$/.test(value) ? callBack() : callBack('请输入鲁B/鲁U开头完整车牌号')
}
}
],
telNumber: [
{
validator: (rule, value, callBack) => {
if (!value) {
callBack('请输入手机号码')
} else if (/^[1][0-9]{10}$/.test(value)) {
callBack()
} else {
callBack('请输入正确的手机号码')
}
}
}
]
},
......
}),
created() {
this.validator = new ValidatorUtils({
rules: this.rules,
data: this.formData })
this.formData = this.validator.Data
},