vue2.0 + ele的循环表单及验证字段方法

前端之家收集整理的这篇文章主要介绍了vue2.0 + ele的循环表单及验证字段方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

关于vue2.0 + ele的表单循环以及对应字段的验证!!!!!

HTML代码

script代码

export default {
var checkTel = (rule,value,callback) => {
//循环判断这里是关键,这样做才可以对循环里每一条做判断
for (let i = 0; i < this.form.xh.length; i++) {
value = this.form.xh[i].tel;
var vdt = this.VDT.vdata(value,{ //这里需要你自己去在另一个文件里配上
'required': {msg: '请填写账号'}
});
if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}
};
var checkNickname = (rule,callback) => {
for (let i = 0; i < this.form.xh.length; i++) {
//先判断有没有姓名,假使nickname为false那就不要验证
if (this.form.xh[i].isNickname) {
value = this.form.xh[i].nickname;
var vdt = this.VDT.vdata(value,{ //这里需要你自己去在另一个文件里配上
'required': {msg: '请填写姓名'}
});
if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
}
else {
callback();
}
}
};
//因为这里不是循环里面的,所以value对应的值就一个故可直接使用
var checkAge = (rule,callback) => {
var vdt = this.VDT.vdata(value,{'required': {msg: '请填写年龄'}});
if (!vdt.result) {
callback(new Error(vdt.msg));
} else {
callback();
}
};
return {
form: {
xh:[{
tel,nickname,isnickname:false,//附一个初始值,默认不显示
}],age:'',id:'1',},rules: {
tel: [{required: true,validator:checkTel,trigger: 'blur',}],nickname: [{required: true,validator:checkNickname,age: [{required: true,validator:checkAge,created() {
this.getData();
},methods: {
getData() {
this.fullScreenLoading = true;
fetchdata(this.id).then(response => { //这里请求对应的接口
if(response.data.success == true) {
this.fullScreenLoading = false;
this.form = response.data.data; //返回数据赋给表单

}else{
  this.fullScreenLoading = false;
  return false;
}

}
}
}

本文只是作者在开发时总结出来的经验,希望可以有所帮助。

以上这篇vue2.0 + ele的循环表单及验证字段方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/30119.html

猜你在找的Vue相关文章