記錄 iView 的表單驗證
摘要：
iview表單驗證必要設定
1. 給 Form 標籤用 :model 繫結資料
2. 給 Form 標籤裡面必須新增 ref , 用於最後提交獲取 Form 表單的例項
3. 給 Form 設定屬性 rules :rules
4. 給需要驗證的每個 FormItem...
- iview表單驗證必要設定
1. 給 Form 標籤用 :model 繫結資料 2. 給 Form 標籤裡面必須新增 ref , 用於最後提交獲取 Form 表單的例項 3. 給 Form 設定屬性 rules :rules 4. 給需要驗證的每個 FormItem 設定屬性 prop , 用於表單驗證和繫結屬性一致
- iview驗證多個表單問題
<template>
<Form ref="addForm" :model="addForm" :rules="addFormValidate" >
<FormItem label="名稱" prop="name">
<Input v-model="addForm.name" />
</FormItem>
</Form>
<Form ref="editForm" :model="editForm" :rules="editFormValidate" >
<FormItem label="名稱" prop="name">
<Input v-model="editForm.name" />
</FormItem>
</Form>
</template>
<script>
export default {
methods:{
this.$refs.addForm.validate((valid) => {
//第一層驗證第一個表單
if (valid) {
this.$refs.editForm.validate((valid) => {
//第二層驗證第二個表單
if(valid){
alert('驗證成功')
}
})
}
})
}
}
</script>
- iview自定義表單驗證
<template>
<Form ref="addForm" :model="addForm" :rules="ruleValidate" >
<FormItem label="名稱" prop="name">
<Input v-model="addForm.name" />
</FormItem>
</Form>
</template>
<script>
export default {
data() {
var validateName = function(rule, value, callback){
if(!value){
return callback(new Error("請輸入名稱"));
}else if(!/^[\u4e00-\u9fa5]+$/.test(value)){
return callback(new Error("請正確輸入名稱"))
}else{
callback();
}
};
return {
addForm:{
name:""
}
ruleValidate:{
name : [{validator : validateName , trigger : 'blur'}]
}
}
}
}
</script>
自定義的驗證規則寫在data 裡面，在return 的ruleValidate 指定欄位validator 裡面呼叫；
trigger
：觸發機制（blur | change）
pattern
：正則表示式
enum
：驗證欄位是否存在其中
equired
：是否為空（true | false）
whitespace
：空白字元（true | false）
- iview表單驗證的型別
1. string （字串/預設型別） 2. number （數字） 3. boolean （布林型別） 4. method （函式） 5. float （浮點數） 6. integer （整數） 7. array （陣列） 8. object （物件） 9. date （日期） 10. url （URL型別） 11. email（電子郵件型別）