iview框架的Form 组件基于 async-validator 实现数据验证,给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。

简单的验证

北京

上海

深圳

男

女

提交

重置

export default{

data () {return{

formValidate: {

name:'',

mail:'',

city:'',

gender:'',

interest: [],desc:''},

ruleValidate: {

name: [

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

],

mail: [

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

{ type:'email', message: '格式错误', trigger: 'blur'}

],

city: [

{ required:true, message: '请选择城市', trigger: 'change'}

],

gender: [

{ required:true, message: '请选择性别', trigger: 'change'}

],

interest: [

{ required:true, type: 'array', min: 1, message: '请选择兴趣爱好', trigger: 'change'},

{ type:'array', max: 2, message: '最多选择两项', trigger: 'change'}

]，desc: [

{ required:true, message: '请输入个人简介', trigger: 'blur'},

{ type:'string', min: 20, message: '不能少于20个字符', trigger: 'blur'}

]

}

}

},

methods: {

handleSubmit (name) {this.$refs[name].validate((valid) =>{if(valid) {

//验证成功后执行的方法}else{

//验证失败后执行的方法}

})

},

handleReset (name) {this.$refs[name].resetFields();

}

}

}

下面是两个输入框之间关联的例子，就拿最近做的一个项目举例吧,async-validator有一个字段validator，可以自定义验证规则

let checkc7 = (rule, value, callback) => {

let c7 = parseFloat(this.formRecord.c7)

if (c7 < (c6 * 0.95)) {

callback("实测制冷量不应小于额定制冷量的95%")

} else {

callback()

}

}

ruleRecord:{

c6: [

{

required:true,

message:'不能为空'}

],

c7: [

{

required:true,

message:'不能为空'},

{

validator: checkc7,

trigger:'blur'}

]

}