场景再现:

在使用 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" }],
]

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部