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

 更新时间:2018年09月18日 11:03:21   作者:csdn_cozk   我要评论
今天小编就为大家分享一篇vue2.0 + ele的循环表单及验证字段方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

关于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的循环表单及验证字段方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue+webpack+Element 兼容问题总结(小结)

    Vue+webpack+Element 兼容问题总结(小结)

    这篇文章主要介绍了Vue+webpack+Element 兼容问题总结(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue与Node.js通过socket.io通信的示例代码

    Vue与Node.js通过socket.io通信的示例代码

    这篇文章主要介绍了Vue与Node.js通过socket.io通信的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue-cli基础配置及webpack配置修改的完整步骤

    vue-cli基础配置及webpack配置修改的完整步骤

    这篇文章主要给大家介绍了关于vue-cli基础配置及webpack配置修改的完整步骤,文中通过示例代码介绍的非常详细,对大家的学习或者使用vue-cli具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    这篇文章主要介绍了vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue父组件通过props如何向子组件传递方法详解

    vue父组件通过props如何向子组件传递方法详解

    在Vue 中,可以使用 props 向子组件传递数据,下面这篇文章主要给大家介绍了关于vue父组件通过props如何向子组件传递方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • vue实现的微信机器人聊天功能案例【附源码下载】

    vue实现的微信机器人聊天功能案例【附源码下载】

    这篇文章主要介绍了vue实现的微信机器人聊天功能,结合实例形式分析了基于vue.js的微信机器人聊天相关界面布局、ajax交互等操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2019-02-02
  • elementUI table表格动态合并的示例代码

    elementUI table表格动态合并的示例代码

    这篇文章主要介绍了elementUI table表格动态合并的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue2.0 实现富文本编辑器功能

    vue2.0 实现富文本编辑器功能

    这篇文章主要介绍了vue2.0 实现富文本编辑器功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 详解vue.js全局组件和局部组件

    详解vue.js全局组件和局部组件

    这篇文章主要介绍了详解vue.js全局组件和局部组件,实例分析了全局组件和局部的技巧,有兴趣的可以了解一下。
    2017-04-04
  • Vue项目报错:Uncaught SyntaxError: Unexpected token <

    Vue项目报错:Uncaught SyntaxError: Unexpected token <

    这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论