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

场景再现:

在使用 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" }],
]
相关推荐
三思而后行,慎承诺1 分钟前
详解React Fiber架构中,reconcile阶段的具体工作流程
javascript·react.js·ecmascript
前端太佬3 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信
二进制独立开发4 分钟前
[Trae 04.22+]适用于Vue开发的智能体提示词
vue.js·trae
前端太佬4 分钟前
微信小程序支付全流程实战指南(Node.js后端篇)
前端·javascript·微信小程序
资深前端外卖员8 分钟前
【nodejs高可用】Nodejs应用安全防范的问题总结
前端·javascript
前端大白话19 分钟前
Vue2和Vue3语法糖差异大揭秘:一文读懂,开发不纠结!
javascript·vue.js·设计模式
tianchang20 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein20 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试
Carlos_sam20 分钟前
Opnelayers:向某个方向平移指定的距离
前端·javascript