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 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
node脚手架搭建服务器实现token验证的方法
Jan 20 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与XML的PDF文档生成技术
2006/10/09 PHP
JS 网站性能优化笔记
2011/05/24 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Python中的yield浅析
2014/06/16 Python
Python中运行并行任务技巧
2015/02/26 Python
Python中的高级数据结构详解
2015/03/27 Python
python如何在终端里面显示一张图片
2016/08/17 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python zip函数打包元素实例解析
2019/12/11 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
大学生就业自荐信
2013/10/26 职场文书
毕业生自荐书
2013/12/18 职场文书
亲子读书活动方案
2014/02/22 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2015年教学工作总结
2015/04/02 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技