解决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>
相关推荐
一 乐4 分钟前
幼儿园管理|基于springboot + vue幼儿园管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
JIngJaneIL5 分钟前
基于Java + vue校园论坛系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
馬致远30 分钟前
Vue TodoList 待办事项小案例(代码版)
前端·javascript·vue.js
一字白首1 小时前
Vue 进阶,Vuex 核心概念 + 项目打包发布配置全解析
前端·javascript·vue.js
计算机学姐1 小时前
基于SSM的网上花店销售系统【2026最新】
java·vue.js·mysql·java-ee·tomcat·intellij-idea·mybatis
OpenTiny社区1 小时前
从千问灵光 App 看生成式 UI 技术的发展
前端·vue.js·ai编程
代码or搬砖2 小时前
flask与vue实现通过websocket通信
vue.js·websocket·flask
Tzarevich2 小时前
从命令式到声明式:用 Vue 3 构建任务清单的开发哲学
javascript·vue.js·响应式编程
页面魔术3 小时前
⭐看完vite纪录片才知道尤大有多屌(上)
前端·javascript·vue.js
AI_56783 小时前
Vue3组件通信的实战指南
前端·javascript·vue.js