vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
關(guān)于vue2.0 + ele的表單循環(huán)以及對(duì)應(yīng)字段的驗(yàn)證!?。。。?/strong>
html代碼
<el-form ref="ruleForm" :inline="true" :model="form" label-width="140px" :rules="rules"
v-loading.fullscreen.lock="fullScreenLoading" element-loading-text="拼命加載中...">
<div v-for="(item, index) in form.xh" @click="handleindex(index)">
<el-form-item label="賬號(hào)" prop="tel">
<el-input v-model="item.tel" ></el-input>
</el-form-item>
<el-form-item label="姓名" prop="nickname" v-show="item.isnickname">
<el-input v-model="item.nickname"></el-input>
</el-form-item>
</div>
<el-form-item label="年齡" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="onCancel">取消</el-button>
</el-form-item>
</el-form>
script代碼
//引入接口
import {
fetchdata,
} from 'src/api/login'
export default {
var checkTel = (rule, value, callback) => {
//循環(huán)判斷這里是關(guān)鍵,這樣做才可以對(duì)循環(huán)里每一條做判斷
for (let i = 0; i < this.form.xh.length; i++) {
value = this.form.xh[i].tel;
var vdt = this.VDT.vdata(value, { //這里需要你自己去在另一個(gè)文件里配上
'required': {msg: '請(qǐng)?zhí)顚戀~號(hào)'}
});
if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}
};
var checkNickname = (rule, value, callback) => {
for (let i = 0; i < this.form.xh.length; i++) {
//先判斷有沒(méi)有姓名,假使nickname為false那就不要驗(yàn)證
if (this.form.xh[i].isNickname) {
value = this.form.xh[i].nickname;
var vdt = this.VDT.vdata(value, { //這里需要你自己去在另一個(gè)文件里配上
'required': {msg: '請(qǐng)?zhí)顚懶彰?}
});
if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}
else {
callback();
}
}
};
//因?yàn)檫@里不是循環(huán)里面的,所以value對(duì)應(yīng)的值就一個(gè)故可直接使用
var checkAge = (rule, value, callback) => {
var vdt = this.VDT.vdata(value, {'required': {msg: '請(qǐng)?zhí)顚懩挲g'}});
if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
};
return {
form: {
xh:[{
tel,
nickname,
isnickname:false, //附一個(gè)初始值,默認(rèn)不顯示。
}],
age:'',
id:'1',
},
rules: {
tel: [{required: true, validator:checkTel,trigger: 'blur',}],
nickname: [{required: true, validator:checkNickname,trigger: 'blur',}],
age: [{required: true, validator:checkAge,trigger: 'blur',}],
},
},
},
created() {
this.getData();
},
methods: {
getData() {
this.fullScreenLoading = true;
fetchdata(this.id).then(response => { //這里請(qǐng)求對(duì)應(yīng)的接口
if(response.data.success == true) {
this.fullScreenLoading = false;
this.form = response.data.data; //返回?cái)?shù)據(jù)賦給表單
}else{
this.fullScreenLoading = false;
return false;
}
}
}
}
本文只是作者在開(kāi)發(fā)時(shí)總結(jié)出來(lái)的經(jīng)驗(yàn),希望可以有所幫助。
以上這篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3項(xiàng)目引入阿里iconfont圖標(biāo)與字體及使用教程
Iconfont國(guó)內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫(kù),提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目引入阿里iconfont圖標(biāo)與字體及使用教程,需要的朋友可以參考下2023-05-05
vue.js實(shí)現(xiàn)格式化時(shí)間并每秒更新顯示功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)格式化時(shí)間并每秒更新顯示功能,結(jié)合實(shí)例形式分析了vue.js時(shí)間格式化顯示與基于定時(shí)器進(jìn)行實(shí)時(shí)更新的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式
這篇文章主要介紹了Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01
django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios
這篇文章主要介紹了django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-05-05

