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 继承的实现
Jul 09 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
原生js编写焦点图效果
Dec 08 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jQuery的三种$()
2009/12/30 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
js实现日期级联效果
2014/01/23 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Python读取键盘输入的2种方法
2015/06/16 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
关于python中的xpath解析定位
2020/03/06 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
大一自我鉴定范文
2013/10/04 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
眼镜促销方案
2014/03/15 职场文书
六年级学生评语
2014/04/22 职场文书
销售目标责任书
2014/07/23 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
小学音乐课教学反思
2016/02/18 职场文书