element-plus 表单验证失效

Question

在Vue3的尝试使用element-plus的表单验证，发现表单验证失效。
点击输入框再失焦不会提示
不输入值直接点击提交,valid变量的值为true

环境

  "dependencies": {
    "element-plus": "^1.0.2-beta.40",
    "lodash": "^4.17.21",
    "vue": "^3.0.4",
    "vue-router": "^4.0.6"
  },
  "devDependencies": {
    "typescript": "^4.2.4",
    "sass": "^1.32.11",
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }

代码

  <el-dialog v-model="visible">
    <el-form :model="typeForm" :rules="rules" ref="typeFormRef">
      <el-form-item label="类型名称" prop="name">
        <el-input v-model="typeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model="typeForm.unit" maxlength="5" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitType">提交</el-button>
    </template>
  </el-dialog>
  
    // 提交表单逻辑
    let typeForm = reactive({ name: "", unit: "" });
    let rules = {
      name: [{ require: true, message: "请输入类型名", trigger: "blur" }],
      unit: [{ require: true, message: "请输入类型单位", trigger: "blur" }],
    };
    let typeFormRef = ref(null);
    function submitType() {
      (typeFormRef.value as any).validate((valid: any) => {
        console.log(valid);
        if (valid) {
          console.log(typeForm)
        } else {
          return false;
        }
      });
    }

    return {
      types,
      submitType,
      typeFormRef,
      visible,
      changeVisible,
      rules,
      typeForm,
    };

Answer 1

name:[{required:true,message:"请输入类型名"}]单词拼写错误