首页 > 其他分享 >elementUI--el-form表单数据校验

elementUI--el-form表单数据校验

时间:2024-09-13 18:25:14浏览次数:11  
标签:el form elementUI rules 校验 trigger blur

一、普通的值类型的数据校验

①设置 el-form-item 的 prop 值 与 formdata 中定义的 key 保持一致`

②如果 rules 需要通过 el-form 统一设置,rules 的 key 定义也与 prop 保持一致(如果不一致,需要在 el-form-item 中 手动指定)

③复杂的校验函数可通过 validator 单独定义

<el-form

  class="demo-form"

  :model="form"

  :rules="rules"

>

  <el-form-item label="数据库库名:" prop="database">

     <el-input v-model="form.database" placeholder="请输入数据库库名"> </el-input>

  </el-form-item>

  <el-form-item label="数据表名称:" prop="sheet">

        <el-input v-model="form.sheet" placeholder="请输入数据表名称"> </el-input>

  </el-form-item>

</el-form>


<script>

import { Reg_w } from '@/utils/reg'

export default {

  data() {

    // 数据库表名校验

    let validatorSheet = (rule, value, callback) => {

      if (!value) {

        callback(new Error('请输入数据表名称'))

      } else if (!Reg_w(value)) {

        callback(new Error('表名称仅支持字母数字下划线组合'))

      } else {

        callback()

      }

    }

    return {

      // 表单数据

      form: {

        // 数据表名称

        sheet: undefined,

        // 数据库库名

        database: undefined,

      },

      // 校验规则

      rules: {

        sheet: [{ required: true, validator: validatorSheet, trigger: 'blur' }],

        database: [{ required: true, message: '请输入数据库库名', trigger: 'blur' }],

      },

    }

  },

}

</script>

二、表单数据为数组,数组循环中的每个字段需要校验

在上述使用方式的基础上,需要额外注意:

①prop 在循环中需要对应到 formdata 中 数组的某一项具体值,可以利用 index 等变量 进行锁定,再取到 具体的key

②v-model 结合循环正常使用

③el-form-item 的 rules 需要 手动指定

<el-form

  class="demo-form"

  :model="form"

  :rules="rules"

>

  <div v-for="(item, index) in form.fieldList" :key="item.id" class="sheet-item">

    <!-- 字段名称 -->

    <el-form-item :prop="`fieldList[${index}][field]`" :rules="rules.field_name">

      <el-input v-model="item.field" placeholder="请输入字段名"> </el-input>

    </el-form-item>

    <!-- 字段注释 -->

    <el-form-item :prop="`fieldList[${index}][comment]`" :rules="rules.field_comment">

      <el-input v-model="item.comment" placeholder="请输入字段注释"> </el-input>

    </el-form-item>

  </div>

</el-form>


<script>

export default {

  data() {

    return {

      // 表单数据

      form: {

        // 表单字段列表

        fieldList: [

          //内部是这样的格式: { id: 1, field: '字段1', comment: '注释1' }  
        ],

      },

      // 校验规则

      rules: {

        field_name: [{ required: true, message: '请输入字段名', trigger: 'blur' }],

        field_comment: [{ required: true, message: '请输入字段注释', trigger: 'blur' }],

      },

    }

  },

}

</script>

标签:el,form,elementUI,rules,校验,trigger,blur
From: https://blog.51cto.com/u_16307147/12007235

相关文章

  • ACCT3003: Accounting Modelling and Data
    ACCT3003:AccountingModellingandDataVisualisationFolioAssignmentGuide,Semester2, 2024Due Date for Submission: Sunday 15/9/2024 at 5.00 PMPleasenotethatthePractical AssignmentforACCT3003AccountingModellingandDataVisualisationis......
  • RESTful规范 GET请求、POST请求、PUT请求、DELETE请求的使用规范
    RESTFUL是一种网络应用程序的设计风格和开发方式,基于HTTP,可以使用XML格式定义或JSON格式定义。RESTFUL适用于移动互联网厂商作为业务使能接口的场景,实现第三方OTT调用移动网络资源的功能,动作类型为新增、变更、删除所调用资源。RESTFul规范:一.http动词:GET(SELECT):从服务器取出资源......
  • io.netty.util.internal.PlatformDependent#DIRECT_MEMORY_COUNTER
    定时输出 DIRECT_MEMORY_COUNTER,可以监控应用直接内存的使用情况。 PlatformDependent.DIRECT_MEMORY_COUNTER是一个用于跟踪和统计直接内存使用情况的计数器。在Java中,直接内存是指通过ByteBuffer.allocateDirect()方法分配的内存,这种内存不受Java堆内存大小的限制,而是受操......
  • Sentinel在边缘服务(如API网关)中的应用和策略是什么?
    在微服务架构中,API网关(也称为边缘服务)通常作为所有客户端请求的单一入口点。API网关不仅可以提供路由功能,还将安全性、监控、缓存、限流、动态数据转换等功能集中在一起。Sentinel在API网关中的应用主要是为了保护后端服务免受过载风险,确保系统的稳定性和响应时间。以下是......
  • Linux下Shell脚本实现统一管理服务启停重启
    公司今年开始了大批量的裁员,人心惶惶,所以强迫自己学习点新知识,刚好领导给找了个事情,让写个脚本实现一键启停Linux服务器上的服务,于是开始研究这个怎么搞。最开始的时候,有点想当然了,觉得一键启停不就是写个菜单,调用一下服务启动停止的命令就可以实现,但是在写的过程中,发现全是坑,搞......
  • 【编程小白必看】使用Selenium进行网页自动化操作操作秘籍一文全掌握
    【编程小白必看】使用Selenium进行网页自动化操作操作秘籍......
  • Python爬虫案例七:抓取南京公交信息数据并将其保存成excel多表形式
    测试链接:        https://nanjing.8684.cn/line4 思路:先抓取某个类型下的某一条线路所有数据,然后实现批量,,列举出三个类型代表既可源码:fromlxmlimportetreefromxlutils.copyimportcopyimportrequests,os,xlrd,xlwtdefget_all():#获取所......
  • 数据库的操作:DML数据操纵语言:增删修改查(insert/delete/update/select)
    一.概论对表中的数据进行操纵的语言二.语法:1.增加数据:insert2.删除数据:delete3.修改数据:update4.查找数据:select三.案例insert/delete/update/select1.查找商品数量:select语法:select字段|表达式from表名|视图|结果集[where条件][groupby分组][having分组之......
  • 转载:国产操作系统麒麟v10、UOS在线打开excel文件并动态赋值
    在实际的开发过程中,经常会遇到数据库中的数据填充到excel生成一份正式文件的功能,PageOffice客户端控件支持在线预览Excel文件时,通过Workbook对象来实现对Excel文件的数据填充功能,如果只是简单的填充一下数据,那么通过调用Sheet对象的openCell方法获取到Cell对象并赋值即可Java......
  • winform-运动和学习
    项目简介:   这是一款帮助大家进行运动和学习的一款产品,在此项目中可以清楚的看到自己发生的变化,也可以通过本产品的AI技术,学习和了解更多的知识内容,此项目可进行转发,供更多的人使用。在使用中如遇到问题,请联系:lilf0117。项目下载地址为:https://mp-22e7468a-898b-4fd0-b8ef-c......