使用elemeng-ui 中el-form 表单校验的三种方式

最新推荐文章于 2025-06-13 16:19:19 发布

迪邦尼

最新推荐文章于 2025-06-13 16:19:19 发布

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue javascript

本文链接：https://blog.csdn.net/Zgtby/article/details/117694919

本文介绍了在vue项目中使用element-ui进行表单验证的三种方法：一是全局校验，适用于所有字段校验；二是单个字段验证，适合个别字段或动态变化的校验；三是动态增减验证，通过循环匹配字段进行校验。详细步骤和实例代码在文中均有说明。

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

一、进行element-ui引入

先下载element-ui

cnpm install element-ui -S

完整引入和按需引入在Element-UI官方文档都有详细操作步骤⇥element-ui官方文档

二、表单效验的方式

第一种：在el-form表单上加多个验证

这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

做法：需要在el-form-item标签中加入 :rules=’'rules ‘’ ，然后在data()中写入rule{添加每个表单的验证}

在data中写入以下代码：
在这里插入图片描述
其中对于有些需要自定义的校验规则可以作为变量写在data中：

在这里插入图片描述

第二种：在el-form-item单个添加验证

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验。

实际操作：需要在el-form-item标签中加入 :rules=’'验证的条件 ‘’

在这里插入图片描述

第三种：动态增减表单验证（element-ui官网方法）

在这里插入图片描述
除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
这里的rule、prop直接写就对应不上表单mode绑定的对象上的属性，所以在此要用循环的方式找到要校验的字段所在数据中的索引，然后再以字符串拼接的方式连上校验字段名称

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      {
   
    required: true, message: '请输入邮箱地址'<

最低0.47元/天解锁文章

200万优质内容无限畅学