關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)
更新時(shí)間：2022年07月31日 08:56:36 作者：HoShining
這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element-ui中el-form自定義驗(yàn)證
需求
在輸入項(xiàng)目名稱后，調(diào)用后端接口isNameOnly，若已存在，則效果如下圖：
1.先設(shè)置校驗(yàn)規(guī)則rules
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
2.在return中定義
// 判定規(guī)則
rules: {
taskName: [{
required: true,
message: '請(qǐng)輸入項(xiàng)目名稱',
trigger: 'blur'
},
{
min: 3,
max: 15,
message: '長(zhǎng)度在 3 到 15 個(gè)字符',
trigger: 'blur'
},
{
required: true,
trigger: 'blur',
//validatePass --- 我們自定義的校驗(yàn)規(guī)則
validator: validatePass
}
],
},
3.在data中添加如下代碼：（注意，以下代碼和return同級(jí)）
const validatePass = (rule, value, callback) => {
this.$depot.get({
url: '/isNameOnly',
config: {
params: {
taskName: 1,
userId: 1)
}
},
cb: (res) => {
this.nameOK = res.data == 1 ? true : false
}
})
if (this.nameOK != false) {
callback()
} else {
callback(new Error('經(jīng)驗(yàn)證，該項(xiàng)目已存在于數(shù)據(jù)庫(kù)中'))
}
}
4.method定義提交表單方法
// 提交表單數(shù)據(jù)
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message({
message: '恭喜你！項(xiàng)目創(chuàng)建成功！',
type: 'success'
});
} else {
this.$message({
message: '請(qǐng)按照提示正確輸入信息后再創(chuàng)建！',
center: true
});
}
});
},
element-ui自定義form表單校驗(yàn)規(guī)則
HTML：
<el-form
ref="form"
label-width="120px"
:rules="rules"
:model="ruleForm"
>
<el-form-item
label="身份證號(hào)"
size="mini"
class="part"
prop="id_card"
>
<el-input
v-model="ruleForm.id_card"
></el-input>
</el-form-item>
</el-form>注意
使用校驗(yàn)規(guī)則的表單,在data中定義的時(shí)候必須要放在一個(gè)對(duì)象中,:model="ruleForm"這行代碼一定要寫,不寫不生效!
js：
export default {
name: "",
data() {
//自定義校驗(yàn)規(guī)則
var checkIdCard = (rule, value, cb) => {
const regIdCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (regIdCard.test(value)) {
return cb();
}
cb(new Error("您輸入的身份證號(hào)碼不是有效格式"));
};
return {
ruleForm: {
id_card: "", //身份證
},
rules: {
id_card: [
{ required: true, message: "請(qǐng)輸入身份證", trigger: "blur" },
{ validator: checkIdCard, trigger: "blur" },
],
}
},
element ui 官網(wǎng)也有詳細(xì)介紹哦------https://element.eleme.cn/#/zh-CN/component/form
這樣也就實(shí)現(xiàn)了自定義校驗(yàn)的規(guī)則,可以在項(xiàng)目中使用了!
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.6.10+vite2開(kāi)啟template模板動(dòng)態(tài)編譯的過(guò)程
這篇文章主要介紹了vue2.6.10+vite2開(kāi)啟template模板動(dòng)態(tài)編譯,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了vue 遮罩層阻止默認(rèn)滾動(dòng)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue3項(xiàng)目搭建的詳細(xì)過(guò)程記錄
使用VUE3開(kāi)發(fā)很久了,但一直沒(méi)進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目搭建的詳細(xì)過(guò)程,需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue項(xiàng)目接口訪問(wèn)地址設(shè)置方式
這篇文章主要介紹了vue項(xiàng)目接口訪問(wèn)地址設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單(巧用new promise)
這篇文章主要介紹了巧用new promise實(shí)現(xiàn)Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單功能，實(shí)現(xiàn)的方法有很多種，本文給大家?guī)?lái)的是一種比較完美的方案,需要的朋友可以參考下2018-06-06
vue實(shí)現(xiàn)帶過(guò)渡效果的下拉菜單功能
這篇文章主要為大家詳細(xì)介紹了vue仿寫帶過(guò)渡效果的下拉菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
VUE實(shí)時(shí)監(jiān)聽(tīng)元素距離頂部高度的操作
這篇文章主要介紹了VUE實(shí)時(shí)監(jiān)聽(tīng)元素距離頂部高度的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07