仿照elementui自写表单验证

2021-12-01 17:03:01 阅读：224 来源： 互联网

标签：return 自写 form elementui 表单 item 组件 validate prop

input组件中绑定input事件，将input事件和输入的值传给父组件父组件通过v-model接收 button组件中当点击button后，阻止默认事件，并且发送给父组件点击事件和参数

      this.$emit('click', e)
      e.preventDefault()

主页面中，将input传过来的信息和主页面中规定的rules值传入表单外壳组件<form/> 给表单外壳组件<form/>绑定ref，通过ref执行<form/>中的validate函数

this.$refs.form.validate((valid) => {
    if (valid) {
    console.log('验证成功')
    } else {
    console.log('验证失败')
    return false
    }
})

注意:validate函数的参数是一个函数，这个函数的参数是item-form组件返回的boolean值 form中，给item-form组件提供自己的this

        provide() {
            return {
                form: this
            }
        },

执行主页面发起的validate函数，获取所有子组件，挑选有props的(item-form)，执行item-form的validate方法

            validate(callback) {
                const tasks = this.$children[0].$children
                    .filter((child) => child.prop)
                    .map((child) =>child.validate())
    
                Promise.all(tasks)
                    .then(() => callback(true))
                    .catch(() => callback(false))
            },

item-form组件中

inject: ['form'],接收form

validate() {
                if (!this.prop) return //主页面填写的prop值
                const value = this.form.model[this.prop] //对应prop的值
                const rule = this.form.rules[this.prop] //对应的prop的规则
                if (rule[0].required) {
                    if (!value) {
                        this.errMessage = '输入错误'
                        return false
                    } else {
                        this.errMessage = ''
                        return true
                    }
                }
                return true
            },

标签：return,自写,form,elementui,表单,item,组件,validate,prop
来源： https://www.cnblogs.com/truegrit/p/15629776.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

仿照elementui自写表单验证