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


Posted in Javascript onSeptember 18, 2018

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

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="账号" 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) => {
   //循环判断这里是关键,这样做才可以对循环里每一条做判断
    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, value, 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, value, 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,trigger: 'blur',}], 
    age: [{required: true, validator:checkAge,trigger: 'blur',}], 
   },
  },
  },
 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的循环表单及验证字段方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
JavaScript指定断点操作实例教程
Sep 18 #Javascript
对VUE中的对象添加属性
Sep 18 #Javascript
微信小程序适配iphoneX的实现方法
Sep 18 #Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 #Javascript
解决vue attr取不到属性值的问题
Sep 18 #Javascript
vue动画打包后失效问题的解决方法
Sep 18 #Javascript
vue自定义全局共用函数详解
Sep 18 #Javascript
You might like
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP实现微信提现功能
2018/09/30 PHP
php实现简易计算器
2020/08/28 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python中time库的实例使用方法
2019/10/31 Python
解决Python二维数组赋值问题
2019/11/28 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
浅析Python 多行匹配模式
2020/07/24 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
小学国庆节活动方案
2014/02/11 职场文书
学生打架检讨书
2014/02/14 职场文书
项目合作意向书模板
2014/07/29 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
司机岗位职责
2015/02/04 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
vue中 this.$set的使用详解
2021/11/17 Vue.js