elementUI 实现动态表单数据校验

转载http://t.csdn.cn/XuTa2

1、探讨需求
首先我们需要探讨一下需求:

表单中的部分el-form-item 的label都是从接口拿到的,需要遍历进行动态渲染。
需要给每个el-form-item加上校验至少是必填校验
有的el-form-item不需要校验,也不是从接口获取得
2、查阅相关文档(element官网)
ElementUI封装了组件el-form来收集、校验和提交数据,其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则,我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验,当不满足要求时会弹出message相应的提示信息。
官方示例:

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

我们只看自己需要的内容:

可以看到在v-for 循环遍历后的el-form-item中prop属性绑定值是这么写的::prop = "domains.+ index + '.value'",因为是动态绑定的所以需要加上冒号:。
表单的label属性也是通过动态遍历出来的:label = "'item' + index"。
这里的rules单独写在了表单遍历的每一项上进行校验。由于是动态渲染的需要在每一项上都单独绑定上校验规则。

我们el-form-item的每一项的label使用parameterAlias,而input中绑定的值为parameterValue


<el-form :model="form" label-width="100px" v-if="form.dataSourceConfig.length" style="margin-left: -50px;"
        :rules="rules">
        <el-form-item label="名称" prop="databaseName">
          <el-input v-model="form.databaseName" placeholder="请输入数据源名称" maxlength="30" show-word-limit></el-input>
        </el-form-item>

        <el-form-item v-for="(item,index) in form.dataSourceConfig" :key="index"
          :prop="'dataSourceConfig.'+index+'.parameterValue'" :label="item.parameterAlias"
          :rules="rules[`${item.parameterName}`]">
          <el-input v-model="item.parameterValue" :placeholder='"请输入"+item.parameterAlias' maxlength="30"
            show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="说明">
          <el-input type="textarea" v-model="form.description" placeholder="请输入说明" maxlength="300" rows="3"
            show-word-limit></el-input>
        </el-form-item>
      </el-form>
关键点:
:prop="'dataSourceConfig.'+ index +'.parameterValue'"
:label="item.parameterAlias"
:rules="rules[${item.parameterName}]"

定义我们需要的form表单与校验规则:

 // 表单数据
      form: {
        databaseName: '',
        description: '',
        dataSourceConfig: []
      },
     rules: {
       username: { required: true, message: "请输入名称", trigger: 'blur' },
        ip: { required: true, message: "请输入ip", trigger: 'blur' },
        port: [{ required: true, message: '端口号不能为空', trigger: 'blur' },
          { type: 'number', message: '端口号必须为数字值', trigger: 'blur' }
        ],
        db: { required: true, message: "请输入库名", trigger: 'blur' },
        password: { required: true, message: "请输入密码", trigger: 'blur' },
        databaseType: { required: true, message: "请输入数据库类型", trigger: 'blur' },
        databaseName: {
          required: true, message: `名称不能为空`, trigger: 'blur'
        }

// 获取参数列表
      getDataSourceParams(code).then(res => {
        this.form.dataSourceConfig = res.data.data;
        this.loading = false

      })

4、注意事项
这里说一下表单校验的注意事项:

Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
Form-Item的prop属性需要与对应的v-model绑定的值一致(如上案例prop属性设置的字段名为value,input的v-model绑定值也是value),否则校验会不生效。
el-form标签绑定的对象 :model="form" :rules="rules",这里的form就是我们用到的表单那个对象,rules就是我们定义的校验规则。
数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。例如:v-model.number="form.phone"
 

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!


原文链接:https://blog.csdn.net/qq_49002903/article/details/131916341

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

@monaco-editor/react组件CDN加载失败解决办法

monaco-editor/react引入这个cdn资源会load失败 网上很多例子都是这样写的&#xff0c;我这样写monaco会报错 import * as monaco from monaco-editor; import { loader } from monaco-editor/react;loader.config({ monaco });改成这样 import * as monaco from monaco-edi…

​​​amoeba实现MySQL读写分离

​​​amoeba实现MySQL读写分离 准备环境&#xff1a;主机A和主机B作主从配置&#xff0c;IP地址为192.168.131.129和192.168.131.130&#xff0c;主机C作为中间件&#xff0c;也就是作为代理服务器&#xff0c;IP地址为192.168.131.136。三台服务器操作系统为RHEL6.4 x86_64,为…

搞活系列-Java NIO之偏偏不用buffer.flip()会出现什么问题?

最近看博客又看到了Java NIO相关的博客&#xff0c;其中有讲解NIO和传统IO关于文件复制的文章&#xff0c;看到了如下的代码&#xff1a; /**** channel用例* 基于channel的文件复制*/Testpublic void fileCopyByChannel(){try {FileInputStream fileInputStream new FileInpu…

TypeScript 【type】关键字的进阶使用方式

导语&#xff1a; 在前面章节中&#xff0c;我们了解到 TS 中 type 这个关键字&#xff0c;常常被用作于&#xff0c;定义 类型别名&#xff0c;用来简化或复用复杂联合类型的时候使用。同时也了解到 为对象定义约束接口类型 的时候所使用的是 Interfaces。 其实对于前面&#…

iOS 应用上架流程详解

iOS 应用上架流程详解 欢迎来到我的博客&#xff0c;今天我将为大家分享 iOS 应用上架的详细流程。在这个数字化时代&#xff0c;移动应用已经成为了人们生活中不可或缺的一部分&#xff0c;而 iOS 平台的 App Store 则是开发者们发布应用的主要渠道之一。因此&#xff0c;了解…

智安网络|常见的网络安全陷阱:你是否掉入了其中?

在数字化时代&#xff0c;网络安全成为了一个重要的议题。随着我们越来越多地在互联网上进行各种活动&#xff0c;诸如在线银行交易、社交媒体分享和在线购物等&#xff0c;我们的个人信息也更容易受到攻击和滥用。虽然有许多关于网络安全的指导和建议&#xff0c;但仍然有许多…

【ChatGPT】ChatGPT是如何训练得到的?

前言 ChatGPT是一种基于语言模型的聊天机器人&#xff0c;它使用了GPT&#xff08;Generative Pre-trained Transformer&#xff09;的深度学习架构来生成与用户的对话。GPT是一种使用Transformer编码器和解码器的预训练模型&#xff0c;它已被广泛用于生成自然语言文本的各种…

【前端知识】React 基础巩固(四十)——Navigate导航

React 基础巩固(四十)——Navigate导航 一、Navigate的基本使用 新建Login页面&#xff0c;在Login中引入Navigate&#xff0c;实现点击登陆按钮跳转至/home路径下&#xff1a; import React, { PureComponent } from "react"; import { Navigate } from "reac…

HTML5 API 多端通信桥 MessageChannel 技术

这个特别有意思&#xff0c;可以将其理解为通信桥的概念&#xff0c;桥有两个端&#xff08;port1&#xff0c;port2&#xff09;只要将port1&#xff0c;port2指定到任意两个进程&#xff0c;无论是iframe-iframe&#xff0c;iframe-worker&#xff0c;parent-child-iframe&am…

【数据结构】图文并茂,通过逻辑图带你轻松拿捏链表,实现各种接口功能

君兮_的个人主页 勤时当勉励 岁月不待人 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;我们接着之前讲过的顺序表来继续介绍初阶数据结构的内容&#xff0c;今天给大家带来的是有关链表的基本知识和各种接口功能的实现 好了&#xff0c;废话不多说&#x…

LeetCode 周赛上分之旅 # 36 KMP 字符串匹配殊途同归

⭐️ 本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问。 学习数据结构与算法的关键在于掌握问题背后的算法思维框架&#xff0c;你的思考越抽象&#xff0c;它能覆盖的问题域就越广&#xff0c;理解难度…

day50-Insect Catch Game(捉虫游戏)

50 天学习 50 个项目 - HTMLCSS and JavaScript day50-Insect Catch Game&#xff08;捉虫游戏&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport"…

codeblocks编译lvgl报错

codeblocks编译lvgl报错 1.报错内容2.解决方案3.lvgl本身代码报错 1.报错内容 error: unknown type name _In_opt_ ...2.解决方案 官网下载&#xff1a; 这里的Compiler’s installation directory 选择自带的 3.lvgl本身代码报错 undefined reference to _lv_utils_bse…

面试总结-Redis篇章(九)——Redis主从复制、主从数据同步原理

Redis其他面试问题 主从复制单节点Redis的并发能力是有上限的&#xff0c;要进一步提高Redis的并发能力&#xff0c;就需要搭建主从集群&#xff0c;实现读写分离主节点主要进行客户端的写操作&#xff0c;从节点进行客户端的读操作&#xff0c;因为Redis一直都是读多写少&…

UE5.1.1 创建C++项目失败

因一直使用Unity开发环境&#xff0c;安装Unreal后&#xff0c;并未详细配置过其开发环境&#xff0c;默认创建蓝图工程无异常&#xff0c;但创建UE C项目时总共遇到两个错误&#xff1a; 错误一 Running /Epic/UE/UE_5.1/Engine/Build/BatchFiles/Build.bat -projectfiles -…

<C++>二、类和对象-构造函数

1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会生…

【Linux多线程】死锁问题介绍

死锁 &#x1f96d;什么是死锁&#x1f965;死锁产生的条件&#x1f95d;如何避免死锁&#x1f345; 避免死锁算法 &#x1f96d;什么是死锁 死锁是多线程或多进程编程中的一种常见问题&#xff0c;指的是两个或多个线程&#xff08;或进程&#xff09;相互等待对方持有的资源&…

搜索二叉树_SearchBinaryTree

目录 搜索二叉树的原理 搜索二叉树的搜索时间复杂度 二叉搜索树实现_key 模型 节点 构造函数 查找 中序遍历 插入 循环 递归 删除 循环 1.删除叶子节点 2.删除有一个孩子的节点 3.左右孩子都不为空 递归 析构函数 拷贝构造 operator key_value 模型 节点 …

Mysql触发器

1.触发器 触发器是与表有关的数据库对象&#xff0c;指在 insert / update / delete 之前或之后&#xff0c;触发并执行触发器中定义的SL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性&#xff0c;日志记录&#xff0c;数据校验等操作。 使用别名 OLD 和 …

mysql安装教程保姆级

MySQL免安装本地运行 1.下载MySQL2.创建install.bat3.init.sql 初始创建4.环境变量配置5.运行 install.bat 管理员权限运行6.连接成功遇到的问题 1.下载MySQL ①地址&#xff1a;https://downloads.mysql.com/archives/community/ ②解压 2.创建install.bat 放在mysql>b…