vue3+ts校验表单不生效解决方法总结

    刚开始接触vue3+ts的时候会用操作很多的表单或者表格，表单设计的最多的就是校验了，我在刚接触vue3+ts来写校验的时候也遇到校验失效的问题，主要是控制台也没有报错，debugger发现根本没有走校验逻辑，接下来就要好好检查一下自己的代码了。

1.检查字段绑定是否有误，先检查有没有写ref属性，model绑定的正确性，是否绑定了rules规则，对应的规则名称是否与prop属性一致，如果都没有问题那就检查逻辑代码部分。

// 模板 检查 ref属性、model、rules、prop
<el-form ref="editFormRef" :model="editForm.form" :rules="eidtRules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="" prop="processMode"></el-form-item>
</el-form>

const eidtRules = ({
      processMode: [{ required: true, message: '请输入', trigger: 'blur' }]
    })

2.检查方法是否根据ref获取到了数据，此处可以打印一下。

const editFormRef = ref<HTMLElement | null>(null)
const checkForm = () => {
      const formNode1 = editFormRef.value as any
      console.log('此处打印一下获取的数据', formNode1)
}

3.然后就是调用校验的方法，校验分为表单全部校验合部分字段校验。

值得注意的是我们在校验某个字段时，检验返回的结果要取反，全局校验校验结果不需要取反 。

4.当然完成以上几步还是校验无效的，因为少了关键的一步，我当时遇到这个问题就找了很久，其实就是一个细节问题。vue可以直接通过this.$refs获取，但是vue3不是，vue3要先在setup函数里定义一个响应式的ref数据，然后再返回给模板使用。

5.总结。

 前端职场小白，如果有说的不对的地方欢迎评论指正，其实最主要的还是要学会自己定位问题。