iview 输入框_使用iview框架，如何进行输入框或者按钮的关联验证
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框架，如何进行输入框或者按钮的关联验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 5、this调用语句必须是构造函数中的第
- 下一篇： 华为抓截屏_原来这才是华为截屏的正确姿势