使用ElementUI循环生成的Form表单添加校验

目录
  • ElementUI循环生成的Form表单添加校验
    • HTML代码片段
    • VUE中data中的声明
    • 效果图
  • ElementUI循环动态生成表单校验问题

ElementUI循环生成的Form表单添加校验

ElementUI 中使用循环生成的form表单需要动态添加校验的规则

在data中定义好需要的rule,使用Element的语法给 :rules 动态绑定

:prop="getAllTableData.${i}.value"

getAllTableData是v-for绑定的数组,i是索引,value是表单绑定的v-model的名称

HTML代码片段

// An highlighted block
<!-- dialog -->
<el-dialog
    :title="dialogTitle"
    :visible.sync="dialogFormVisible"
    @close="dialogClose"
    :close-on-click-modal="false"
    width="40%"
    class="dialogForm-box"
>
    <el-form
        label-position="left"
        label-width="120px"
        ref="dialogRef"
        :model="getAllFormData"
    >
        <!-- 循环开始  -->
        <template v-for="(item,i) in getAllFormData.getAllTableData">
            <!-- 
            判断循环中的元素是否需要下拉框  
            :rules="item.rule"  循环中的数据 自定义的 rule 规则
            :prop="`getAllTableData.${i}.value`"
            每次循环的时候进行取值, 相当于给每个form绑定了唯一的model
            -->
            <el-form-item
                v-if="item.selectFlag"
                :key="item.labelName"
                :label="item.labelName"
                :prop="`getAllTableData.${i}.value`"
                :rules="item.rule"
                class="selectInput-box"
            >
                <el-select v-model="item.value" placeholder="请选择">
                    <el-option
                        v-for="(item1) in item.selectOption"
                        :key="item1.value"
                        :label="item1.label"
                        :value="item1.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                v-else-if="!item.hidden && item.disabled"
                :key="item.labelName"
                :prop="`getAllTableData.${i}.value`"
                :rules="item.rule"
                :label="item.labelName"
            >
                <el-input
                    v-model="item.value"
                    clearable
                    autocomplete="off"
                    :disabled="true"
                ></el-input>
            </el-form-item>
            <el-form-item
                v-else-if="!item.hidden"
                :key="i"
                :prop="`getAllTableData.${i}.value`"
                :rules="item.rule"
                :label="item.labelName"
            >
                <el-input v-model="item.value" clearable autocomplete="off"></el-input>
            </el-form-item>
        </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="FormSureBtn" :loading="SureBtnLoading">确 定</el-button>
    </div>
</el-dialog>

VUE中data中的声明

getAllFormData: {
        getAllTableData: [
             {
                 labelName: "规则ID",
                 value: "",
                 propName: "ruleid",
                 disabled: true,
                 hidden: true,
                 // 规则必须也得定义在form绑定的model中
                 rule: {
                     required: false
                 }
             },
             {
                 labelName: "编码",
                 value: "",
                 propName: "code",
                 rule: {
                     // ElementUI 表单校验规则的语法
                     validator: (rule, value, callback) => {
                         if (value == "") {
                             callback();
                         } else {
                             // 采用正则表达式进行判断
                             let reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
                             if (reg.test(value)) {
                                 callback(new Error("请输入英文或数字"));
                             } else {
                                 callback();
                             }
                         }
                     },
                     trigger: "blur"
                 }
             },
             {
                 labelName: "名称",
                 value: "",
                 propName: "name",
                 rule: {}
             },
             {
                 labelName: "审核类别",
                 value: "",
                 propName: "typename",
                 rule: {}
             },
             {
                 labelName: "字段名称",
                 value: "",
                 propName: "fieldcode",
                 rule: {}
             },
             {
                 labelName: "备注",
                 value: "",
                 propName: "memo",
                 rule: {}
             },
        
             {
                 labelName: "评分",
                 value: "",
                 propName: "mark",
                 prop: "mark",
                 rule: {
                     required: true,
                     validator: (rule, value, callback) => {
                         if (value == "") {
                             callback(new Error("请输入数字"));
                         } else {
                             let reg = /^[0-9]+([.]{1}[0-9]{1})?$/;
                             if (!reg.test(value) || value > 100) {
                                 callback(new Error("请输入0-100的有效数字,可保留一位小数"));
                             } else {
                                 callback();
                             }
                         }
                     },
                     trigger: "blur"
                 }
             },
             {
                 labelName: "警告标识",
                 value: "",
                 propName: "warnsign",
                 prop: "warnsign",
                 selectFlag: true,
                 selectOption: [
                     {
                         value: "0",
                         label: "否"
                     },
                     {
                         value: "1",
                         label: "是"
                     }
                 ],
                 rule: {
                     required: true,
                     message: "请选择对应的选项"
                 }
             }
             ]
 },

效果图

required: true,说明该内容是必须填写的

正则表达式可以自定义项目需求的样式

ElementUI循环动态生成表单校验问题

<el-form :model="upsertForm" ref="upsertForm" 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="upsertForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in upsertForm.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('upsertForm')">提交</el-button>
    <el-button @click="addDomain">新增专利号</el-button>
    <el-button @click="resetForm('upsertForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        upsertForm: {
          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.upsertForm.domains.indexOf(item)
        if (index !== -1) {
          this.upsertForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.upsertForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

注意:循环的是文本框,它隶属于form 表单,form 表单绑定的是upsertForm ,所以,它的对象必须要在upsertForm 里面,才能生效

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • Vue+Element实现动态生成新表单并添加验证功能

    首先有一个这样的需求,表单中默认有一个联系人信息,用户可以再添加新的联系人信息 点击添加更多联系人之后 官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的新增,可以考虑的实现方法是先写死一个必须的表单,需要新增的两个表单放在一个div里,在div中使用v-for生成,达到同时新增的效果 代码如下 //必填一个联系人的表单 <el-form-item class="rules" label="通知对象:" prop="noti

  • Vue elementUI表单嵌套表格并对每行进行校验详解

    目录 效果展示 代码链接 关键代码 表格数据 组件嵌套 校验方法 重置方法 完整代码 总结 效果展示 先看看这是不是需要的效果^_^ 如图,ElementUI 表单里嵌套了表格,表格内每行能进行[保存][新增][编辑][删除][重置]等操作,同时可以对每行的某些字段进行校验(而不是整个表单校验!),这种需求很常见,所以记录下来. 代码链接 gitee地址 关键代码 表格数据 // 数据格式必须是[对象嵌套数组],[form]绑定表单,[list]绑定表格 form: { // 表格数据 list

  • Vue之ElementUI Form表单校验

    表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明. 以下是form的demo el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email"

  • 使用ElementUI循环生成的Form表单添加校验

    目录 ElementUI循环生成的Form表单添加校验 HTML代码片段 VUE中data中的声明 效果图 ElementUI循环动态生成表单校验问题 ElementUI循环生成的Form表单添加校验 ElementUI 中使用循环生成的form表单需要动态添加校验的规则 在data中定义好需要的rule,使用Element的语法给 :rules 动态绑定 :prop="getAllTableData.${i}.value" getAllTableData是v-for绑定的数组,i是索

  • Element通过v-for循环渲染的form表单校验的实现

    目录 普通的form表单校验 v-for 循坏的表单校验 实现的代码 普通的form表单校验 日常业务开发中,对于中后台管理系统,form表单校验是一个很常见的问题. 查阅Element官方文档,我们了解到,form表单校验是这样的,需要给所校验的el-form-item添加prop属性值,这个属性值便就是当前元素v-model 所绑定的值.如图所示: v-for 循坏的表单校验 那么问题来了,通过v-for 遍历循环渲染的form表单怎么添加校验呢?主要问题就在于其prop了. 再次阅读官方文

  • layui form表单提交后实现自动刷新

    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪怕是button标签呢,也不行.我试了一下,使用这种情况的话,主要是在监听事件中并没有返回return false,如果返回了return false,这个就可以不再刷新. 2.提交表单,获取不到form表单中的数据. 有人说,是因为给了一个id,并没有给name属性,用惯了jquery.我懒得去找

  • vant组件表单外部的button触发form表单的submit事件问题

    目录 vant组件表单外部的button触发form表单的submit事件 一.给form表单添加ref属性 二.处理外部button vant点击表单中普通按钮为什么会触发表单提交 vant组件表单外部的button触发form表单的submit事件 有时候根据需求以及布局需要,button按钮需要放在form外部,但是想触发提交事件的同时又想方便地获取表单的值 一.给form表单添加ref属性 <van-form ref="formData" alidate-first @s

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • 仿ElementUI实现一个Form表单的实现代码

    使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 完整项目地址:仿 ElementtUI 实现一个 Form 表单 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Input 表单验证 我们先看一下 ElementUI 中 Form 表单的基本用法 <el-form :model="ruleForm" :rules="rules" ref="loginFo

  • Vue模仿ElementUI的form表单实例代码

    实现要求 模仿 ElementUI 的表单,分为四层结构:index 组件.Form 表单组件.FormItem 表单项组件.Input 和 CheckBox 组件,具体分工如下: index 组件: 实现:分别引入 Form 组件.FormItem 组件.Input 组件,实现组装: Form 表单组件: 实现:预留插槽.管理数据模型 model.自定义校验规则 rules.全局校验方法 validate: FormItem 表单项组件: 实现:预留插槽.显示 label 标签.执行数据校验.

  • Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

随机推荐