element ui form 表单出现英文提示的解决方案

代码搬运媛2024-09-07 8:02

场景再现：

在使用 form 表单的时候，一般都需要对表单元素进行验证，错误就出现在了这里，除了配置的错误信息，还会出现一个英文校验提示，如下图：

解决方案

出现的原因是在el-form-item中使用了required属性，同时又用rules自定义了表单验证规则。

这时候如果需要设置必填项，此时的 require 需要配置在 el-input 中，或者直接配置在 rule 中。

// 错误示例，required 定义在了 el-form-item
<el-form-item
  label="名称"
   prop="name"
   required
 >
   <el-input
     v-model="form.menuName"
     :placeholder="'请输入名称'"
     maxlength="30"
   />
 </el-form-item>

// 正确写法，写在 el-input中
<el-form-item
  label="名称"
   prop="name"
 >
   <el-input
     v-model="form.menuName"
     :placeholder="'请输入名称'"
     maxlength="30"
     required
   />
 </el-form-item>

或者在 rule 中配置：

rules: [
	menuName: [{ required: true, validator: validateMenuName, trigger: "blur" }],
]