Element-Plus之el-form表单验证文字不提示

请问下各位码爷 问题如下：
使用element-plus中的el-form表单时
已经配置好了rule和prop
并且form-item.prop和input.prop一致
验证时文字不显示是什么情况呢？

img

img

img

感谢各位码爷的回复和解决方案！！！
我终于找到了原因，希望可以记录下
若像我一样踩坑的同学可以留意一下

我本来想解决一下盒子溢出的问题，请看如下详情：

* {
  /*这是罪魁祸首啊！！！*/
  overflow: hiden
}

img

body {
  /*写在body里面就可以了*/
  overflow: hiden
}

img

问题解决！！！

img

下面的rules的每一项是一个数组，数组里面包裹对象

img

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7441271
  • 你也可以参考下这篇文章：Element form表单校验不消失问题
  • 除此之外, 这篇博客: 实现element el-form表单验证中的 1. 入口文件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • model，rules 传递给form组件
    • 通过refs调用子组件的validate方法
     <c-form :model="ruleForm" :rules="rules" ref="CForm">
     <c-form-item label="用户名" prop="name">
         <c-input v-model="ruleForm.name"></c-input>
     </c-form-item>
     <c-form-item label="密码" prop="password">
         <c-input v-model="ruleForm.password"></c-input>
     </c-form-item>
     <button @click="submit('CForm')">新建</button>
 </c-form>

    export default {
    data() {
      return {
        ruleForm: { name: '', password: '' },
        rules: {
          name: [{ required: true, message: '请输入用户名', trigger: 'change' }],
          password: [{ required: true, message: '请输入密码', trigger: 'change' }]
        }
      }
    },
    methods: {
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
  • 以下回答由chatgpt基于相关博客总结生成:

    根据参考资料提供的代码，提示文字不显示的可能原因为以下两种情况：

    1. 配置了错误提示信息后，没有触发验证导致文字不显示。 解决方案：在触发验证的时候，系统会根据验证规则和已输入的内容自动触发验证，如果未触发验证则不会显示错误提示信息。可以手动触发验证，方法是使用 el-form 组件中的 validate 方法。

    2. 配置了错误提示信息，但是验证规则不生效。 解决方案：检查验证规则是否配置正确，以及验证规则中的 trigger 是否正确指定，trigger 指定了触发验证的事件，如 blur、change 等。在该代码中，验证规则已经正确指定了 trigger 为 blur，因此应该排查验证规则是否正确配置。如果验证规则配置正确，则可以在控制台查看是否有相应的错误提示和报错信息。

    以下是代码示例：

    // 注册一个 ref
const userFormRef = ref();
const state = reactive({
  loading: false,
  isShowDialog: false,
  ruleForm: {
    belonger: '',
    child: {
      interviewTime: '',
    },
  },
  rules: {
    child: {
      interviewTime: [{ required: true, message: '请选择面试时间', trigger: 'blur' }],
    },
  },
});

// 在 onMounted() 中手动触发验证
onMounted(() => {
  userFormRef.value.validate();
});

// 在 onSubmit 方法中触发验证
const onSubmit = async () => {
  state.loading = true;
  userFormRef.value.validate(async (valid: any) => {
    if (valid) {
      // 验证通过
    }
    state.loading = false;
  });
};

// 将 ref 绑定到 el-form 上
<el-form ref="userFormRef" :model="ruleForm" :rules="rules" size="default" label-width="110px">
  // ...
</el-form>