解决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>
相关推荐
August_._几秒前
【软件安装教程】Node.js 开发环境搭建详解:从安装包下载到全局配置,一篇搞定所有流程
java·vue.js·windows·后端·node.js·配置
一颗烂土豆1 分钟前
🚀从 autofit 到 vfit:Vue 开发者该选哪个大屏适配工具?
前端·vue.js
一颗宁檬不酸17 分钟前
Vue.js 初学者基础知识点总结 第一弹
前端·javascript·vue.js
@cc小鱼仔仔33 分钟前
vue 知识点
前端·javascript·vue.js
特级业务专家35 分钟前
《终章:从 Vite 专用到全构建工具生态 - 我的字体插件如何征服 Webpack、Rollup 全栈》
前端·javascript·vue.js
一 乐1 小时前
宠物医院预约|宠物医院|基于SprinBoot+vue的宠物医院预约管理系统源码+数据库+文档)
java·前端·数据库·vue.js·后端·springboot
aha-凯心1 小时前
React 中没有 v-model,如何优雅地处理表单输入
前端·javascript·vue.js·react.js
lcc1871 小时前
Vue3 其它Composition API
前端·vue.js
tsumikistep1 小时前
【前后端】Vue 基本使用方式(下)—— 条件渲染、双向绑定、事件绑定
前端·javascript·vue.js
hellotutu2 小时前
vue2+springboot通过 FormData 手动封装图片数据上传
java·vue.js·spring boot·后端·ui