淺談validator自定義驗證及易錯點
更新時間：2022年02月08日 14:53:02 作者：虛實與
這篇文章主要介紹了validator自定義驗證及易錯點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
validator自定義驗證及易錯點
validator自定義驗證
element中Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗的字段名即可。
而表單驗證功能就包括validator自定義驗證，用法如圖所示
在驗證規(guī)則中自定義一個規(guī)則，命名隨意，再給它一個觸發(fā)函數(shù)，而規(guī)則自定義的方法如下
value：輸入的數(shù)據(jù)；callback：回滾的對象
在這個箭頭函數(shù)中定義自己想要的規(guī)則，就可以實現(xiàn)自定義，但要注意的是必須回滾
易錯點
寫完測試時發(fā)現(xiàn)自定義的驗證無法使用，但是其他驗證缺沒有任何問題，那原因就是在于數(shù)據(jù)沒有綁定成功
這時就應(yīng)該檢查圖中這三個地方，自定義驗證時是需要這三個地方保持一致的，否則自定義驗證不會成功
vue里面如何自定義校驗
正常用的都是elemelnt-ui組件的form表單；里面有校驗規(guī)則；
如下
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活動名稱" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活動區(qū)域" prop="region">
<el-select v-model="ruleForm.region" placeholder="請選擇活動區(qū)域">
<el-option label="區(qū)域一" value="shanghai"></el-option>
<el-option label="區(qū)域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活動時間" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即時配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活動性質(zhì)" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
<el-checkbox label="地推活動" name="type"></el-checkbox>
<el-checkbox label="線下主題活動" name="type"></el-checkbox>
<el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊資源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="線上品牌商贊助"></el-radio>
<el-radio label="線下場地免費"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活動形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '請輸入活動名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
],
region: [
{ required: true, message: '請選擇活動區(qū)域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '請至少選擇一個活動性質(zhì)', trigger: 'change' }
],
resource: [
{ required: true, message: '請選擇活動資源', trigger: 'change' }
],
desc: [
{ required: true, message: '請?zhí)顚懟顒有问?, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>也可以自定義校驗
如下：
通過validator屬性來自定義；是模擬form表單那個自定義校驗規(guī)則的
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年齡不能為空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('請輸入數(shù)字值'));
} else {
if (value < 18) {
callback(new Error('必須年滿18歲'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('請輸入密碼'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('請再次輸入密碼'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('兩次輸入密碼不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
</script>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法
這篇文章主要給大家介紹了關(guān)于項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
Vue?Router解決多路由復(fù)用同一組件頁面不刷新問題(場景分析)
這篇文章主要介紹了Vue?Router解決多路由復(fù)用同一組件頁面不刷新問題,多路由復(fù)用同一組件的場景分析，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例
今天小編就為大家分享一篇讓axios發(fā)送表單請求形式的鍵值對post數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁保留選中狀態(tài)的相關(guān)資料,vue table組件是一個非常方便的表格組件,它可以幫助我們實現(xiàn)分頁和選中功能,需要的朋友可以參考下2023-08-08
Vue3處理錯誤邊界(error boundaries)的示例代碼
在開發(fā) Vue 3 應(yīng)用時,處理錯誤邊界（Error Boundaries）是一個重要的考量,在 Vue 3 中實現(xiàn)錯誤邊界的方式與 React 等其他框架有所不同,下面,我們將深入探討 Vue 3 中如何實現(xiàn)錯誤邊界,并提供一些示例代碼幫助理解什么是錯誤邊界,需要的朋友可以參考下2024-10-10
本篇文章主要介紹了Vuex提升學(xué)習(xí)篇，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue的watch監(jiān)聽器取消的方法小結(jié)
在 Vue 中,watch 監(jiān)聽器是可以取消的,取消監(jiān)聽器的方式取決于你是如何使用 watch 的,所以本文給大家餓介紹了vue的watch監(jiān)聽器取消的方法,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-02-02
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
VUE3+vite項目中動態(tài)引入組件與異步組件的詳細(xì)實例
在做vue3項目中時,每次使用都需要先進行引入,下面這篇文章主要給大家介紹了關(guān)于VUE3+vite項目中動態(tài)引入組件與異步組件的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue初嘗試--項目結(jié)構(gòu)的相關(guān)知識,需要的朋友可以參考下2018-01-01