场景再现:
在使用 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" }],
]