網(wǎng)站首頁 Vue 正文
validator自定義驗(yàn)證及易錯(cuò)點(diǎn)
validator自定義驗(yàn)證
element中Form 組件提供了表單驗(yàn)證的功能，只需要通過 rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。
而表單驗(yàn)證功能就包括validator自定義驗(yàn)證，用法如圖所示
在驗(yàn)證規(guī)則中自定義一個(gè)規(guī)則，命名隨意，再給它一個(gè)觸發(fā)函數(shù)，而規(guī)則自定義的方法如下
-
value：輸入的數(shù)據(jù)； -
callback：回滾的對(duì)象
在這個(gè)箭頭函數(shù)中定義自己想要的規(guī)則，就可以實(shí)現(xiàn)自定義，但要注意的是必須回滾
易錯(cuò)點(diǎn)
寫完測(cè)試時(shí)發(fā)現(xiàn)自定義的驗(yàn)證無法使用，但是其他驗(yàn)證缺沒有任何問題，那原因就是在于數(shù)據(jù)沒有綁定成功
這時(shí)就應(yīng)該檢查圖中這三個(gè)地方，自定義驗(yàn)證時(shí)是需要這三個(gè)地方保持一致的，否則自定義驗(yàn)證不會(huì)成功
vue里面如何自定義校驗(yàn)
正常用的都是elemelnt-ui組件的form表單；里面有校驗(yàn)規(guī)則；
如下
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活動(dòng)名稱" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活動(dòng)區(qū)域" prop="region">
<el-select v-model="ruleForm.region" placeholder="請(qǐng)選擇活動(dòng)區(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="活動(dòng)時(shí)間" 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="選擇時(shí)間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即時(shí)配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活動(dòng)性質(zhì)" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
<el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
<el-checkbox label="線下主題活動(dòng)" 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="線下場(chǎng)地免費(fèi)"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活動(dòng)形式" 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: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
],
region: [
{ required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '請(qǐng)選擇日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '請(qǐng)選擇時(shí)間', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '請(qǐng)至少選擇一個(gè)活動(dòng)性質(zhì)', trigger: 'change' }
],
resource: [
{ required: true, message: '請(qǐng)選擇活動(dòng)資源', trigger: 'change' }
],
desc: [
{ required: true, message: '請(qǐng)?zhí)顚懟顒?dòng)形式', 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>也可以自定義校驗(yàn)
如下：
通過validator屬性來自定義；是模擬form表單那個(gè)自定義校驗(yàn)規(guī)則的
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年齡不能為空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('請(qǐng)輸入數(shù)字值'));
} else {
if (value < 18) {
callback(new Error('必須年滿18歲'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('請(qǐng)輸入密碼'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));
} 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>原文鏈接：https://blog.csdn.net/qq_41905890/article/details/109724341
相關(guān)推薦
- 2023-03-26 數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實(shí)現(xiàn)詳解_其它
- 2022-07-25 Python文件操作實(shí)戰(zhàn)案例之用戶登錄_python
- 2022-07-08 Python基礎(chǔ)篇之字符串的最全常用操作方法匯總_python
- 2024-01-11 String數(shù)組轉(zhuǎn)List的三種方式
- 2022-08-10 go?modules中replace使用方法_Golang
- 2022-05-16 輕松讀懂Golang中的數(shù)組和切片_Golang
- 2022-12-13 深入了解Rust的生命周期_Rust語言
- 2022-11-01 ElasticSearch寫入流程實(shí)例解析_相關(guān)技巧
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速