仿照elementui自写表单验证

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
            },

 

 

上一篇:flask视频网站(后台管理)


下一篇:【已解决】同时使用ajax和form表单传数据的冲突问题