iview 表单 验证_vue+iview的form表单校验总结

这篇文章时关于如何使用iview的form表单校验。主要学习如何使用form校验(以校验文字长度为例)，以及如何动态添加校验规则和异步校验。

1.为需要校验的表单添加form标签

2.添加校验规则

formRules: {

name: [

{required: true, message: "必输项不能为空", trigger: 'blur'},

{validator:(rule, value, cb)=>{lenValid(value, 30, cb)}, trigger: 'blur'}

],

age:[], // 注意因为age是根据条件判断是否必输，先留个坑

asyName: [ // 异步校验，使用change触发，即使不改变输入数据也会在提交数据的时候自动校验一次

{validator:(rule, value, cb)=>{asyValid(value, cb)}, trigger: 'change'}

]

}

3.校验方法

// 校验输入的字符长度

function lenValid(str, num, cb){

if(str){

let len = getLen(str)

if(len > num){

return cb(new Error('Too Long...'))

}

}

cb()

}

// 获取字符长度

function getLen(str){

let l