解决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>
相关推荐
周全全9 分钟前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ34 分钟前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六34 分钟前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保39 分钟前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~39 分钟前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
周三有雨1 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
大霞上仙2 小时前
element ui table 每行不同状态
vue.js·ui·elementui
lv程序媛3 小时前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
蒟蒻的贤3 小时前
vue学习11.21
javascript·vue.js·学习
麻辣_水煮鱼5 小时前
vue数据变化但页面不变
前端·javascript·vue.js