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" }],
]
相关推荐
MediaTea3 分钟前
七次课掌握 Photoshop:选区与抠图
ui·photoshop
GIS程序媛—椰子14 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端23 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x26 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据1 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea