解决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>
相关推荐
景早21 小时前
商品案例-组件封装(vue)
前端·javascript·vue.js
不说别的就是很菜21 小时前
【前端面试】Vue篇
前端·vue.js·面试
月弦笙音1 天前
【vue3】这些不常用的API,却很实用
前端·vue.js·面试
一 乐1 天前
社区养老保障|智慧养老|基于springboot+小程序社区养老保障系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·小程序
艾小码1 天前
别再只会用默认插槽了!Vue插槽这些高级用法让你的组件更强大
前端·javascript·vue.js
慧一居士2 天前
Vue中 class 和 style 属性的区别对比
前端·vue.js
是大林的林吖2 天前
解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
前端·javascript·elementui
鹏仔工作室2 天前
elemetui中el-date-picker限制开始结束日期只能选择当月
前端·vue.js·elementui
Lyuing2 天前
el-input数字类型禁止+-符号输入
vue.js
拉不动的猪2 天前
Token无感刷新全流程(Vue + Axios + Node.js(Express))
java·javascript·vue.js