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 相关文章推荐
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
简单实现python数独游戏
2018/03/30 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
水利学院求职自荐书
2014/02/01 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
预备党员综合考察材料
2014/05/31 职场文书
北京英语导游词
2015/02/12 职场文书
贫困生证明范文
2015/06/16 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书