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

*父父组件(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多表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vee-validate vue 2.0自定义表单验证的实例

    亲测可用 学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则. 一.安装 您可以通过npm或通过CDN安装此插件. 1. NPM npm install vee-validate --save 2. CDN <script src="path/to/vue.js"></script> <script src="path/to/vee-validate.js"></script> <

  • Vue from-validate 表单验证的示例代码

    前言 需要进行表单数据验证,原先才用html5来完成验证,但是效果很差,也不够灵活,所以需要进行自定义的表单验证,网上的插件都太过庞大,项目并没有这么多的需求. 那让我们自己来写一个吧! 知识准备 vue的自定义指令 具体可以看官方手册,连接如下:https://vuejs.org/v2/guide/custom-directive.html 总的来说就是可以帮你在指定的钩子函数中跳用你的函数,参数(el,binding, vnode) el: 绑定的dom binding: 指令的各项属性 v

  • Vue中使用vee-validate表单验证的方法

    Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看).但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate. 我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-v

  • vue表单验证你真的会了吗?vue表单验证(form)validate

    前言 很久没有写文章了,学习了一下webpack,基础的一些组件,今天带来form表单验证组件(element.iviewui)的一期教程(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的 github 技术文档技术文档会持续更新 效果图 1.原理解释 考虑 我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验 童鞋们现在可能感觉还是没懂,没关系继续往下看. 2.派发和广播 为什么要用广播

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

    *父父组件(helloWorld.vue): <template> <div class="hello-world"> <el-button type="text" @click="saveAll" class="button">SAVE</el-button> <promise-father ref="promiseFather"></pr

  • jquery validate.js表单验证入门实例(附源码)

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • Vue数据增删改查与表单验证的实现流程介绍

    目录 1. 准备工作 2. 弹出窗口 3. 新增更新功能 4. 删除功能 5. 表单验证 6. 接口文档 1. 准备工作 后台服务接口,对书本的增删改查操作 2. 弹出窗口 进入ElementUi官网, 找到Dialog对话框,可以参考“嵌套表单的dialog”实现. 该步骤先实现弹出窗口的前端逻辑,并不会调用后台接口服务进行实际的业务操作. BookList.vue <!-- 弹出窗口:增加和修改书本信息共用一个弹出窗口,需要根据用户的选择动态的设置弹出窗口的标题 :tile 通过绑定值的方式

  • 使用vue中的混入mixin优化表单验证插件问题

    这段时间开发的时候使用到了这个表单校验插件,用起来比较麻烦就不说了,还有较严重的缺陷.自己最终还是抽空把这个插件进行了一些优化,虽然优化的方式和当初自己定下的方向不怎么相同,但是就使用体验上来说还是提高了很多. 1. 实际开发中遇到的问题 在上面的文章中提及了一些表单插件的问题,主要针对的是插件开发本身存在的问题.下面我总结下使用中存在的问题: 每个使用表单校验的元素都需要添加 v-check 类名,比较麻烦. 必须在提交表单按钮上使用 v-checkSubmit 指令进行表单校验,提交函数必须

  • vue中使用element-ui进行表单验证的实例代码

    element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q

  • 基于Bootstrap+jQuery.validate实现表单验证

    这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的

  • jQuery.validate.js表单验证插件的使用代码详解

    Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

  • layui原生表单验证的实例

    在网上看到很多validform和layer配合的验证方式,但是觉得写的不好,不清不楚的,于是研究了一下layui原生的验证 1. 在需要验证的item上加 lay-verify="value" ,在提交按钮上加 lay-submit lay-filter="go" 两个属性 value: required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值(就是自定义验证

  • React中使用async validator进行表单验证的实例代码

    react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂, 目前UI框架使用material ui ,但其表单处理不太理想,而后研究了一下另一个UI 框架 ant design, 其对表单的处理大大方便了逻辑的编写, 它使用async-validator处理验证逻辑 目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单的使用,具体信息可以去github上查看 validate.js import Schema from

随机推荐