vue+element el-form中多重表单验证问题

实现效果1.根据项目需求实现下面展示2.由于存在表单校验且数据格式如下(根据项目需求改造数据结构)如下：[{name: '张三',rules: {insuranceAmount: { type: 'string', required: true, message: '填写医疗', trigger: 'blur' },suggestedPremium...

彻夜不归

4492人浏览 · 2019-04-24 15:50:52

彻夜不归 · 2019-04-24 15:50:52 发布

实现效果

1.根据项目需求实现下面展示
在这里插入图片描述
2.由于存在表单校验且数据格式如下(根据项目需求改造数据结构)如下：

[{
   name: '张三',
   rules: {
     insuranceAmount: { type: 'string', required: true, message: '填写医疗', trigger: 'blur' },
     suggestedPremium: { type: 'string', required: true, message: '填写保费', trigger: 'blur' },
   },
   list: [{ insuranceType: '医疗', insuranceAmount: '', suggestedPremium: '', showFlag: false },
     { insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
   },
   {
    name: '李四',
    rules: {
      insuranceAmount: { type: 'string', required: true, message: '填写医疗', trigger: 'blur' },
      suggestedPremium: { type: 'string', required: true, message: '填写保费', trigger: 'blur' },
    },
    list: [{ insuranceType: '医疗', insuranceAmount: '', suggestedPremium: '', showFlag: false },
      { insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
 }]

3.每一列添加显示隐藏按钮-隐藏后当前行表单不做校验（类似以下图）
在这里插入图片描述
4.所以提交时对每个表单都要做校验(html部分)

5.js提交处理部分

 let newArr = []
 this.wrapList.forEach((ele, index) => {
    this.$refs['form'][index].validate((valid) => {
      if (valid) {
        newArr.push(true)
      } else {
        newArr.push(false)
      }
    })
  })
  let flag = newArr.every((val) => {
    return val == true
  })

  if (flag) {
    console.log('信息填写完整')
  } else {
    console.log('信息未填写完整')
  }

6.完整代码如下（只提供了一个简单demo供参考）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue+element 表单验证-某些行不验证</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <div class="wrap">
      <div v-for="(item, index) in wrapList" :key="index">
        <el-form :rules="item.rules" :model="item" ref="form" v-cloak>
          <p>姓名: {{item.name}}</p>
          <el-table :data="item.list" style="width: 500px">
            <el-table-column prop="date" label="日期" width="180">
              <template slot-scope="scope">
                <div>
                  <el-form-item :prop="'list.' + scope.$index + '.insuranceAmount'" :rules="!scope.row.showFlag ? item.rules.insuranceAmount : {}">
                    <span>保额</span>
                    <el-input type="number" v-model="scope.row.insuranceAmount" :disabled="scope.row.showFlag" style="width:100px;"></el-input>
                    <span>万</span>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
              <template slot-scope="scope">
                <div>
                  <el-form-item :prop="'list.' + scope.$index + '.suggestedPremium'" :rules="!scope.row.showFlag ? item.rules.suggestedPremium : {}"
                    :rules='item..suggestedPremium'>
                    保费
                    <el-input type="number" v-model="scope.row.suggestedPremium" :disabled="scope.row.showFlag" style="width:100px;">元/
                  </el-form-item>
                  </el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" width="100px">
              <template slot-scope="scope">
                <div>
                  <el-button @click="toggleStatus(scope.row)" type="info" :style="{'background-color': scope.row.showFlag ? '#FFAD41' : '#5C98FD','color': '#fff'}"
                    size="small">
                    {{scope.row.showFlag ? '显示': '隐藏'}}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <el-button @click="submitAll">提交</el-button>
    </div>
  </div>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
<script>

  new Vue({
    el: '#app',
    data: {
      wrapList: []
    },
    mounted() {
      this.setList()
    },
    methods: {
      // 定义一些表单数据
      setList() {
        this.wrapList = [
          {
            name: '张三',
            rules: {
              insuranceAmount: { type: 'string', required: true, message: '填写医疗', trigger: 'blur' },
              suggestedPremium: { type: 'string', required: true, message: '填写保费', trigger: 'blur' },
            },
            list: [{ insuranceType: '医疗', insuranceAmount: '', suggestedPremium: '', showFlag: false },
            { insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
          },
          {
            name: '李四',
            rules: {
              insuranceAmount: { type: 'string', required: true, message: '填写医疗', trigger: 'blur' },
              suggestedPremium: { type: 'string', required: true, message: '填写保费', trigger: 'blur' },
            },
            list: [{ insuranceType: '医疗', insuranceAmount: '', suggestedPremium: '', showFlag: false },
            { insuranceType: '重疾', insuranceAmount: '', suggestedPremium: '', showFlag: false }]
          }
        ]
      },
      // 显示或者隐藏 禁用或者开启表单校验
      toggleStatus(row) {
        row.showFlag = !row.showFlag
        this.wrapList.forEach((item, index) => {
          this.$refs['form'][index].clearValidate()
        })
      },
      // 校验表单数据
      submitAll() {
        let newArr = []
        this.wrapList.forEach((ele, index) => {
          this.$refs['form'][index].validate((valid) => {
            if (valid) {
              newArr.push(true)
            } else {
              newArr.push(false)
            }
          })
        })

        let flag = newArr.every((val) => {
          return val == true
        })

        if (flag) {
          console.log('信息填写完整')
        } else {
          console.log('信息未填写完整')
        }
      }
    }
  })
</script>

有问题一起讨论

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^