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

]

}

總結

以上是生活随笔為你收集整理的iview 输入框_使用iview框架，如何进行输入框或者按钮的关联验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。