form Submit提交校验问题不生效

Question

git 地址：https://gitee.com/ren_meng_xue/zheye

麻烦老师帮忙看下表单提交的时候 校验规则不生效 打印的app.vue里面的

onFormSubmit 方法返回的result一直是true

Answer 1

张轩 2023-12-05 09:20:03

同学你好

这里的逻辑你的理解有些偏差，ValidateInput 中 应该是要发射事件到 ValidateForm 的 mitt实例中，而不是新建一个实例，所以要这样修改一下：

// 一开始不需要新建实例了，直接使用 ValidateForm 中的
import { emitter } from './ValidateForm.vue'
// 下面这些都注释掉
// import mitt from 'mitt'
// type ValidateFunc = () => boolean
// type Events = { 'form-item-created': ValidateFunc }// 定义一个Event类型  这个对应是让事件和对应的callback 一一对应
// export const emitter = mitt<Events>()// 实例化 mitt 的时候，作为泛型传递进去

// 63 行的 validateInput 要返回一个 boolean 值，所以要加上返回
const validateInput = () => { 
    if (props.rules) {
      ... 之前的逻辑
      inputRef.error = !allPassed
      return allPassed
    }
    return true
}

// 最后要发射事件，而不是监听事件
onMounted(() => {
    emitter.emit('form-item-created', validateInput)
})
// emitter.on('form-item-created', validateInput)

// 亲测有效

• 提问者 不染的卡卡 #1

  非常感谢您的帮助