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'}
]
}