携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

问题描述

在开发项目时，发现一个表单验证的问题： 一个表单中有很多的参数，对于这些参数，我们希望当满足不同的条件时，可以根据这些条件显示或隐藏某些参数，而对于显示的参数，我们希望做校验，对于隐藏的参数则不用做校验。如果按常规的做法，会出现如下情况：被隐藏的参数（邮箱、地址、联系电话）也做了校验，很显然这样是不可行的。

对于如何解决这种问题，可以继续看下面的代码：

实现

表单 form 中有 name，age，height，sex，weight，email，address，phone 这些参数；当 sex 为男时，显示 name，age，height，sex，weight 并对这些参数进行校验，其他隐藏参数不做校验；当 sex 为女时，显示 name，age，height，sex，weight，email，address，phone 并对这些参数进行校验，其他隐藏参数不做校验。

HTML 代码

<template>
  <div class="app-container">
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" >
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="身高" prop="height">
        <el-input v-model="form.height" />
      </el-form-item>
      <el-form-item label="体重" prop="weight">
        <el-input v-model="form.weight" />
      </el-form-item>
      <el-form-item v-show="form.sex==='男' ? false : true" label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item v-show="form.sex==='男' ? false : true" label="地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item v-show="form.sex==='男' ? false : true" label="联系电话" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit('form')">提交</el-button>
  </div>
</template>

Script 代码

<script>
export default {
  data() {
    return {
      // 表单
      form: {
        name: "",
        age: "",
        height: "",
        sex: "男",
        weight: "",
        email: "",
        address: "",
        phone: "",
      },

      // 校验规则
      rules: {
        sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
        height: [{ required: true, message: "身高不能为空", trigger: "blur" }],
        age: [{ required: true, message: "年龄不能为空", trigger: "blur" }],
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        weight: [{ required: true, message: "体重不能为空", trigger: "blur" }],
        email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        phone: [{ required: true, message: "联系方式不能为空", trigger: "blur" }],
      },
    };
  },
      
  methods: {
    submit(formName) {
      // 当性别为男时需要验证的参数
      var fieldsToValidate = ['sex', 'height', 'age', 'name', 'weight']

      // 当性别为女时增加验证的参数
      if (this.form['sex'] === '女') {
        fieldsToValidate.push('email')
        fieldsToValidate.push('address')
        fieldsToValidate.push('phone')
      }

      // 验证方法：表单验证Promise
      this.checkForm(formName,fieldsToValidate).then((valid) => {
        if (valid) { // true || false
          console.log('验证通过')
          // 验证通过后做点什么
        }
      })
    },
        
    checkForm(formName,fieldsToValidate) {
      // 验证方法：表单验证Promise
      return Promise.all(fieldsToValidate.map((field) => {
        return new Promise((resolve) => {
          this.$refs[formName].validateField(field, (errorMessage) => {
            resolve(errorMessage)
          })
        })
      })).then((errorMessages) => {
        // errorMessages⾥是各个字段的验证错误信息,如果数组⾥全为空字符串则所有验证通过。
        // 判断errorMessages⾥是否全是空串
        const valid = errorMessages.every((errorMessage) => {
          return errorMessage === ''
        })
        return valid
      })
    }
        
  }
}
</script>

效果展示