vant表单点击提交没有触发验证_vant(ZanUi)结合async-validator实现表单验证的方法

最近在开发一个移动端商城项目，用到了有赞的 vant ，因为最近大都采用 element ui 在做PC端的东西，对比来说，vant的完成度还是偏低了点，很多细节都虽然都实现了接口，但是想使用得自己去想办法，没办法拿来即用。昨天用到 Uploader 图片上传 如是，提供了file回调，却没有提供上传功能，我必须给他加2个函数实现axios提交才能用，还有今天用到表单验证这块，它的 Field组件 虽然给了error-message的错误提示接口，但是没有内置表单验证功能。

element ui 采用async-validator 实现表单验证，我也基于这个组件进行扩展，async-validator不支持细粒化验证，于是先对它进行扩展

validator.js

import asyncValidator from 'async-validator'

class validator {

/**

* 构造

* @param rules object async-validator rules

* @param data 初始对象

*/

constructor(rules, data) {

this.setData(data);

this.setRules(rules);

}

/**

* 重新定义初始对象

* 也可以直接修改实例的data

* validator.data = newData

* @param data

*/

setData(data) {

this.data = data;

}

/**

* 设定规则

* @param rules rules object async-validator rules

* @param cover 是否替换旧规则

*/

setRules(rules, {cover} = {}) {

if (cover === undefined || cover) {

this.validators = {};

}

for (let attr in rules) {

const rule = {};

rule[attr] = rules[attr];

this.validators[attr] = new asyncValidator(rule);

}

}

<