表格的输入校验

科 ren

已于 2022-08-25 14:53:24 修改

阅读量739

点赞数

分类专栏： JQ踩坑与提升文章标签： vue.js elementui javascript

于 2022-08-25 14:46:49 首次发布

原文链接：https://blog.csdn.net/qq_43523725/article/details/123214343

版权

JQ踩坑与提升专栏收录该内容

2 篇文章 0 订阅

订阅专栏

elementui笔记：el-table表格的输入校验

安之ccy

已于 2022-03-01 20:25:20 修改

1513

分类专栏：前端提高杂记——趣味百汇文章标签： elementui

于 2022-03-01 20:18:25 首次发布

本文链接： https://blog.csdn.net/qq_43523725/article/details/123214343

版权

    <div id="blogColumnPayAdvert">
        <div class="column-group">
            <div class="column-group-item column-group0 ">
                <div class="item-l">
                    <a class="item-target" href="https://blog.csdn.net/qq_43523725/category_10826938.html" target="_blank" title="前端提高" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}">
                        <img class="item-target" src="https://i-blog.csdnimg.cn/blog_migrate/71c024dc224597326e838b8a1cb12c4d.png" alt="">
                        <span class="title item-target">
                            <span>
                            <span class="tit">前端提高</span>
                                <span class="dec more">同时被 2 个专栏收录<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newArrowDown1White.png" alt=""></span>
                            </span>
                        </span>
                    </a>
                </div>
                <div class="item-m">
                    <span>142 篇文章</span>
                    <span>4 订阅</span>
                </div>
                <div class="item-r">
                        <a class="item-target article-column-bt articleColumnFreeBt" data-id="10826938">订阅专栏</a>
                </div>
            </div>
            <div class="column-group-item column-group1 ">
                <div class="item-l">
                    <a class="item-target" href="https://blog.csdn.net/qq_43523725/category_11147097.html" target="_blank" title="杂记——趣味百汇" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}">
                        <img class="item-target" src="https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
                        <span class="title item-target">
                            <span>
                            <span class="tit">杂记——趣味百汇</span>
                            </span>
                        </span>
                    </a>
                </div>
                <div class="item-m">
                    <span>8 篇文章</span>
                    <span>0 订阅</span>
                </div>
                <div class="item-r">
                        <a class="item-target article-column-bt articleColumnFreeBt" data-id="11147097">订阅专栏</a>
                </div>
            </div>
        </div>
    </div>
<article class="baidu_pl">
    <div id="article_content" class="article_content clearfix">
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b3c43d3711.css">
            <div id="content_views" class="markdown_views prism-atom-one-dark">
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                <p>之前做得比较多的校验是在el-form表单里做的，但有时也遇到，需要在table内输入数据，然后校验输入的数据是否符合要求的情况。因此记录一下。</p>

思路：
1.需要借助el-form的校验，el-table外层嵌套一层el-form，使用el-form的校验机制
2.由于每行都需要校验，因此需要借助scope.$index
3.借助一个提交按钮，测试校验

效果：
1.不输入数据，直接点击“提交”触发校验，由于数据没有输入，校验不通过，给出校验提示
2.点击输入框输入，点击某一个字段，即正在输入状态，这个字段的校验结果就会被清除（clearValidate）
3.数据都填好之后，点击“提交”，再次触发校验
4.校验通过，显示全屏提示是否提交，点击“确定”即可，控制台会打印“校验通过”

在这里插入图片描述

例子：
html：

    <div id="app">
      <el-form class="base-form" ref="baseForm" :model="baseForm" :rules="rules" auto-complete="on">
        <el-table ref="table-input" class="table" highlight-current-row :data="baseForm.demoList">
          <el-table-column label="姓名" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.name'" :rules="rules.name" class="all">
                <el-input v-model="scope.row.name" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.name`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="年龄" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.age'" :rules="rules.age" class="all">
                <el-input v-model="scope.row.age" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.age`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="出生日期" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.birthday'" :rules="rules.birthday" class="all">
                <el-date-picker placeholder="请选择" v-model="scope.row.birthday" format="yyyy-MM-dd" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.birthday`)"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="详细地址" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.address'" :rules="rules.address" class="all">
                <el-input v-model="scope.row.address" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.address`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="flex-c-a margin-top-10">
        <el-button @click="submit">提交</el-button>
      </div>
    </div>

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

data：此处只举例一行，多行的效果可自行加数据测试

           baseForm: {
               demoList: [
                {
                  name: "",
                  age: "",
                  birthday: "",
                  address: ""
                }
                ]
            },
            index: 0,
            rules: {
              name: [
                {
                  required: true,
                  message: "请输入姓名",
                  trigger: "blur"
                }
              ],
              age: [
                { required: true, message: "请输入年龄", trigger: "blur" }
              ],
              birthday: [
                { required: true, message: "请选择出生日期", trigger: "change" }
              ],
              address: [
                { required: true, message: "请输入详细地址", trigger: "blur" }
              ],
            }

 
 
 
 
  
  
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

method：
给一个提交按钮，测试校验

// 提交核对账目
submit() {
    this.$refs.baseForm.validate((valid) => {
         if (valid) {
            this.$confirm("您确定【提交】？", "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
            }).then(() => {
               console.log("校验通过")
            })
         }
     })
}

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

例子里使用的css：

  .all {
    width: 100%;
  }
  .flex-c-a {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .margin-top-10 {
    margin-top: 10px;
  }
  .base-form.el-form-item__content {
    margin-left: 0;
  }

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

完成

</article>

安之ccy

关注关注

6
点赞
踩
15
收藏
打赏
2
评论

            </div>
        </li>
    </ul>
    </div>
    <div class="toolbox-right">
            <div class="tool-directory">
                <a class="bt-columnlist-show" data-id="10826938" data-free="true" data-subscribe="false" data-title="前端提高" data-img="https://i-blog.csdnimg.cn/blog_migrate/71c024dc224597326e838b8a1cb12c4d.png" data-url="https://blog.csdn.net/qq_43523725/category_10826938.html" data-sum="142" data-people="4" data-price="0" data-oldprice="0" data-join="false" data-studyvip="false" data-studysubscribe="false" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6334&quot;,&quot;extend1&quot;:&quot;专栏目录&quot;}">专栏目录</a>
            </div>
    </div>
</div>

:model=”ruleForm” 绑定的数据内容

:rules=”rules” 动态绑定的rules，表单验证规则

ref=”ruleForm” 绑定的对象

template模块
其实问题关键就在于如何给el-form-item动态绑定prop
:prop=”‘tableData.’ + scope.$index + ‘.字段名’”

<div cl

Table:

！！这个校验的实现，主要思路是：1.From表单中嵌套使用table表格，用表单的校验机制实现校验；

2.ivu-form-item元素，绑定动态prop;

html代码如下，本次项目里样式用了 View UI ，element其他，也同样适用这个校验方法：

<template>
<div class=“wrapper”>
<…

附上代码

<el-table-column
prop=“number”
label=“数量”
align=“center”
>
<template slot-scope=“scope”>
<el-input v-model=“scope.row.number” type=“number” size=“mini” placeholder=“请输入内容”>&lt…

2、在data里面定义rules

<template>
<el-form :model=“ruleForm” :rules=“ruleForm.rules” ref=“formRef”>
<el-table :data=“ruleForm.familyList” style=“width: 100%;” :row-style="{height:70+‘px’}

子组件 myInputNumber.vue
默认

过滤字母e，在js中属于数字，但是正则表达式 \d 是拦不住字母e 的
. 只能输入正整数

<el-input type=“number” placeholder=“请输入” min=“1” onKeypress="return (/[\d]/.test(String.fromC

数据部分：

此处字段根据后台字段返回决定：

校验正则：

解决：在表格中加入el-form-item，上代码

<el-form ref=“form” :model=“form” label-width=“120px” :rules=“rules”>
<el-form-item label=“优惠券配置：” prop=“payload”>
<el-table :data=“form.payload” border class=“padloadTable”&g.

<el-form :model=“inServForm” ref=“inServForm” :rules=“rules” size=“small”>
<el-table ref=“infiledList” border :data=“inServForm.infiledList” style=“width: 100%” >
<el-table-column prop=“matnrid” label=“物料编码” width="165p…

具体思路：1、由于确定按钮的校验是针对每一行的表单，所以el-form的ref值需要为动态的值，每次确定的校验也只校验当前行的结果。2、对于是否存在重复的值的校验，需要将当前正处于编辑状态的行与其他的行数据进行匹配，所以在自定义的校验函数里需要传入当前行的

实现思路：
1.由于vue是通过数据驱动展示页面内容，那么可以通过“添加条件”按钮往一个数组中添加对象，然后在下面展示区for循环遍历数组，从而动态生成输入表单。
2.已经完成了动态生成输入框/选择框。那么就是怎么加校验了。注意点来了，该循环的数组对象一点是要在这个form表单绑定的对象中才行:model=“dialogForm”