Vue循环组件加validate多表单验证的实例


Posted in Javascript onSeptember 18, 2018

*父父组件(helloWorld.vue):

<template>
 <div class="hello-world">
  <el-button type="text" @click="saveAll" class="button">SAVE</el-button>
  <promise-father ref="promiseFather"></promise-father>
 </div>
</template>
<script>
import PromiseFather from './promiseFather'
export default {
 name: `HelloWorld`,
 components: { PromiseFather },
 data () {
  return {
   promiseFather: ''
  }
 },
 methods: {
  saveAll () {
   this.$refs.promiseFather.validate(valid => {
    if (valid) {
     this.$message.success('(^o^)~ 验证成功!')
    } else {
     this.$message.error('-_- 验证失败!')
    }
   })
  }
 }
}
</script>
<style scoped>
 .button {
  position: absolute;
  top: 60px;
  left: 660px;
 }
</style>

*父组件(promiseFather.vue):

<template>
 <div class="promise-father">
  <h2>{{ title }}
   <el-button type="text" @click="add" class="button">添加</el-button>
  </h2>
  <div v-for="(item, index) in validateSet" :key="item.id">
   <promise-child ref="promiseChild" :formData="item" :index="index" @remove="remove"></promise-child>
  </div>
 </div>
</template>
<script>
import uuid from 'uuid'
import PromiseChild from '@/components/promiseChild'
export default {
 name: `PromiseFather`,
 components: {
  PromiseChild
 },
 data () {
  return {
   title: 'WHY! mtw',
   promiseChild: '',
   validateSet: []
  }
 },
 methods: {
  validate (callback) {
   if (this.validateSet && this.validateSet.length > 0) {
    const promiseList = []
    this.$refs.promiseChild.forEach((item, index) => {
     promiseList.push(item.validate())
    })
    Promise.all(promiseList).then(() => {
     callback(true)
    }).catch(() => {
     callback(false)
    })
   } else {
    callback(true)
   }
  },
  add () {
   this.validateSet.push({
    name: '',
    phone: '',
    id: uuid.v4()
   })
  },
  remove (num) {
   this.validateSet.splice(num, 1)
  }
 }
}
</script>
<style scoped>
 .index {
  margin-left: -546px;
 }
 .button {
  margin-left: 60px;
 }
</style>

*子组件(promiseChild.vue):

<template>
 <div class="promise-child">
  <el-form :model="form" ref="form" :rules="formRules" :inline="true" label-position="right">
   <el-form-item :label="`${index + 1}`+'、'">
   </el-form-item>
   <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name" size="small"></el-input>
   </el-form-item>
   <el-form-item label="手机" prop="phone">
    <el-input v-model="form.phone" size="small"></el-input>
   </el-form-item>
   <el-form-item>
    <el-button @click="remove" size="small">删除</el-button>
   </el-form-item>
  </el-form>
 </div>
</template>
<script>
import uuid from 'uuid'
export default {
 name: `PromiseChild`,
 props: {
  formData: Object,
  index: Number
 },
 data () {
  return {
   form: {
    name: '',
    phone: '',
    id: uuid.v4()
   },
   formRules: {
    name: [
     { required: true, message: '请输入姓名!', trigger: 'blur' }
    ],
    phone: [
     { required: true, message: '请输入手机号码', trigger: 'blur' },
     { max: 11, message: '长度不能超过11', trigger: 'blur' },
     {
      validator: (rules, value, callback) => {
       if (value) {
        let regPhone = /^(13[0-9]|15[012356789]|18[0123456789]|147|145|17[0-9])\d{8}$/
        if (regPhone.test(value)) {
         callback()
        } else {
         callback('请输入正确的手机号码!')
        }
       } else {
        callback('请输入手机号码!')
       }
      }
     }
    ]
   }
  }
 },
 methods: {
  validate () {
   return new Promise((resolve, reject) => {
    this.$refs.form.validate(valid => {
     if (valid) {
      resolve()
     } else {
      reject()
     }
    })
   })
  },
  remove () {
   this.$emit('remove', this.index)
  }
 }
}
</script>

以上这篇Vue循环组件加validate多表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AngularJS的内置过滤器详解
May 14 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
js实现滑动进度条效果
Aug 21 Javascript
js实现三角形粒子运动
Sep 22 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 #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
You might like
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
drupal 代码实现URL重写
2011/05/04 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
用户注册常用javascript代码
2009/08/29 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
bootstrap table小案例
2016/10/21 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Vue中正确使用jQuery的方法
2017/10/30 jQuery
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
js实现图片实时时钟
2020/01/15 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python 修改列表中的元素方法
2018/06/26 Python
python实现停车管理系统
2018/11/30 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python Kmeans算法原理深入解析
2019/08/23 Python
使用npy转image图像并保存的实例
2020/07/01 Python
详解python中的异常捕获
2020/12/15 Python
硕士研究生个人求职信
2013/12/04 职场文书
食品安全演讲稿
2014/09/01 职场文书
华山导游词
2015/02/03 职场文书
农业项目合作意向书
2015/05/08 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
公司借款担保书
2015/09/22 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书