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 相关文章推荐
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
node.js require() 源码解读
Dec 13 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
js数组实现权重概率分配
Sep 12 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
Javascript 解构赋值详情
Nov 17 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP Socket 编程
2010/04/09 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python面向对象编程基础实例分析
2020/01/17 Python
利用python实现逐步回归
2020/02/24 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
加拿大留学自荐信
2014/01/28 职场文书
销售人员获奖感言
2014/02/05 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
个人党性锻炼总结
2015/03/05 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS