当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue循环组件加validate多表单验证的实例

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

2018年09月21日  | 移动技术网IT编程  | 我要评论

奥林匹克鼓号曲,清朝求生记,中国畜牧业信息网

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网