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

cdtaogang

已于 2023-08-08 17:52:30 修改

阅读量3.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js elementui form

于 2023-08-08 17:52:13 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_41782425/article/details/132172269

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文讲述了在使用ElementUI构建表单时，如何正确设置必填字段的验证规则，即需将`required`属性从`label`标签移动到`el-input`元素上，以确保用户输入时不出现英文校验提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

问题描述

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

在这里插入图片描述

代码如下：

<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元素上即可，问题解决

<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>