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 类
Nov 07 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
基于canvas实现手写签名(vue)
May 21 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php后门URL的防范
2013/11/12 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
python flask安装和命令详解
2019/04/02 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python连接字符串过程详解
2020/01/06 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
keras导入weights方式
2020/06/12 Python
英文简历中的自我评价用语
2013/12/09 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
汽车促销活动方案
2014/03/31 职场文书
创先争优演讲稿
2014/09/15 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS