解决Vue+Element-UI 进行From表单校验时出现了英文提示问题

说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

问题描述

在使用form表单时,往往会对表单字段进行校验,字段为必填项时会添加required属性,此时自定义rules规则时就会需要表单输入框输入数据删除为空时,出现英文校验提示信息

代码如下:

js 复制代码
<el-col :span="12">
  <el-form-item label="用户名" :required="true" prop="name">
    <el-input v-model="temp.name" placeholder="请输入用户名" autocomplete="off" style="width: 80%" />
  </el-form-item>
</el-col>

rules: {
  name: [{ required: true, message: '请输入用户名!', trigger: 'blur' }],
}

解决方法

将required属性放在el-input元素上即可,问题解决

js 复制代码
<el-col :span="12">
  <el-form-item label="用户名" prop="name">
    <el-input v-model="temp.name" placeholder="请输入用户名" :required="true" autocomplete="off" style="width: 80%" />
  </el-form-item>
</el-col>
相关推荐
+VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue民宿平台管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
徐小夕4 小时前
jitword协同AI文档SDK已开源!轻松接入任何后端!
前端·vue.js·github
指尖跳动的光8 小时前
Vue的nextTick()方法
前端·javascript·vue.js
实习生小黄9 小时前
vue3静态文件打包404解决方案
前端·vue.js·vite
OpenTiny社区10 小时前
这是OpenTiny与开发者一起写下的2025答卷!
前端·javascript·vue.js
哟哟耶耶11 小时前
Plugin-安装Vue.js devtools6.6.3扩展(组件层级可视化)
前端·javascript·vue.js
计算机学姐11 小时前
基于SpringBoot的美妆销售系统【个性化推荐算法+数据可视化统计+库存预警+物流信息】
java·vue.js·spring boot·后端·mysql·信息可视化·mybatis
Knight_AL11 小时前
Vue + Spring Boot 项目统一添加 `/wvp` 访问前缀实践
前端·vue.js·spring boot
仰望.14 小时前
vue 甘特图 vxe-gantt 如何实现标记删除数据,显示标记删除后行效果,获取已标记的行数据
vue.js·甘特图·vxe-ui
小二·14 小时前
【万字源码级剖析】深入理解 Vue 3 响应式系统:ref、reactive、computed 与 effect 的底层实现
前端·javascript·vue.js