Vue循环组件加validate多表单验证的实例
2019/6/27 7:41:49
本文主要是介绍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多表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于Vue循环组件加validate多表单验证的实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南