首页 > 其他分享 >elementUI——el-form表单数据校验(包含数组循环)

elementUI——el-form表单数据校验(包含数组循环)

时间:2024-03-29 17:55:21浏览次数:22  
标签:el form elementUI rules 校验 表单 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,校验,表单,blur
From: https://www.cnblogs.com/btsn/p/18104342

相关文章

  • 【前端】- 在使用Element UI 的el-tree组件时,从底层去研究如何去实现一键展开/关闭【t
    第一步:首先我们先去查看elementui官方文档,发现并没有提供这个方法,没办法,只能手写一个了,先给大家看看功能点击前效果:点击后效果:第二步:废话不多说直接上代码,然后我们简单解释下代码页面部分:这里是简单的数结构渲染,不多讲,$refs.Reftree获取的是el-tree的实例,具体作用请看下......
  • train_transforms,Normalize,CrossEntropyLoss,optimizer,前向传播进行特征提取,反向传播优
    目录train_transforms:变换Normalize(mean=127.5,std=127.5) :缩放到[-1,1]......
  • 2.java openCV4.x 入门-hello OpenCV
    专栏简介......
  • 试用EditForm
    根据blazorserver自动生成的例子 @page"/fetchdata"<PageTitle>Weatherforecast</PageTitle>@usingBlazorApp5.Data@injectWeatherForecastServiceForecastService<h1>Weatherforecast</h1><p>Thiscomponentdemonstratesfetc......
  • ELK保留策略
    ELK(Elasticsearch,Logstash,Kibana)是一套用于日志管理和分析的开源工具。在Elasticsearch中,数据保留策略通常是通过索引生命周期管理(ILM)来实现的。以下是一个基于ILM的ELK保留策略的示例配置:首先,确保Elasticsearch已经启用了ILM功能。接下来,创建一个ILM策略,定义保留行为:......
  • SPEL表达式注入分析
    环境依赖<dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-expression</artifactId><version>5.1.9.RELEASE</version></dependency></d......
  • A Systematic Survey of Prompt Engineering in Large Language Models: Techniques a
    本文是LLM系列文章,针对《ASystematicSurveyofPromptEngineeringinLargeLanguageModels:TechniquesandApplications》的翻译。大型语言模型中提示工程的系统综述:技术与应用摘要1引言2提示工程3结论摘要提示工程已经成为扩展大型语言模型(LLM)和视......
  • Large Language Models As Evolution Strategies
    本文是LLM系列文章,针对《LargeLanguageModelsAsEvolutionStrategies》的翻译。作为进化策略的大型语言模型摘要1引言2相关工作3背景4将LLMS转化为ES算法5LLMS作为零样本进化策略6EVOLLM消融研究7EVOLLM与教师微调8讨论摘要大型Transformer模......
  • Channel-Wise Autoregressive Entropy Models For Learned Image Compression
    目录简介创新点模型框架信道条件熵模型实验&结果简介熵约束自动编码器的熵模型同时使用前向适应和后向适应。前向自适应利用边信息,可以被有效加入到深度网络中。后向自适应通常基于每个符号的因果上下文进行预测,这需要串行处理,这妨碍了GPU/TPU的有效利用。创新点本文引......
  • ELK安装部署
     java环境#创建目录mkdir/usr/local/java/#解压tar-zxvfjdk-8u333-linux-x64.tar.gz-C/usr/local/java/#配置环境变量vim/etc/profileexportexportJAVA_HOME=/usr/local/java/jdk1.8.0_211exportJRE_HOME=${JAVA_HOME}/jreexportCLASSPATH=.:${JAVA_......