iview 表单 验证_关于iview中表单Form自定义验证

目的：实现使用iview中表单的验证自己想要的结果

结果：网上找到合适方法validator

步骤：

1.在form中设置好要验证的值

1111

222

2.在vue中data(){}写验证函数。官网有案例：https://www.iviewui.com/components/form

export default {

data () {

var that=this

const validateMenuClassifyId = (rule, value, callback) => {

console.log("单个表单验证")

console.log(value) //value是对应的ormItem.MenuClassifyId值

if (value === ''||value ===0) {     //写逻辑从而达到验证值

callback(new Error('请选择分类！'));   //callback()暂时理解为回调，验证后回调给界面的信息

} else {

callback();   //默认回调，没有异常值

}

};

3.在form中的验证调用2的函数。

MenuClassifyId:[

//required显示*号，validator验证回到的函数，validateMenuClassifyId自定义验证函数，

//trigger暂时理解为验证值是否为空

{ required: true,validator: validateMenuClassifyId, trigger: 'blur' }

],

4.这样设置好，form表单就会自动输入提交时验证函数validateMenuClassifyId。

that.$refs[name].validate((valid) => {

console.log(valid)  //验证全部表单，validateMenuClassifyId回到有错误则会valid返回false。

if (valid) {}else{}

}

疑问：在验证中如果每个form验证调用同一个验证时只会验证一次。

///

Name: [

{ required: true, message: '不能为空!', trigger: 'blur' }

],

官网给出了一个详细的验证说明：https://github.com/yiminghe/async-validator

但是我不会用。只能网上一点一点找方法最后找到上面自己提炼后的方法。

看不懂的可以留言。