博客

依旧是公司里那个Vue+Element UI的项目。今天遇到了一个新的问题：表单中某个选择器的值不同，控制着下面表单内容是否显示。放图：

大概就是这个样子。由后台返回的“发放方式”的数值，控制下面几个input框是否显示。这个实现比较简单，只需要把下面几个框用一个<dev>包裹起来，加上一个v-show=””的判断条件即可，但它们的表单验证让我为难了，因为只看Element UI官网给的方法来看，:rules=”rules”只在data下面绑定了一个rules对象，可我这明显需要两套，即如果发放方式为”平台代发”时，只验证一个”发放方式”否则则全部验证。

花了一点时间摸索，我想：如果不像官方给的那样，rules=”rules”，然后在data下设置rules的值，而是把rules绑定一个函数，这个函数在computed计算属性中，根据不同的条件设置不同的验证方法不就可以了？自己尝试了一下，真的成功了，代码如下：

<el-form class="dialog-body" :rules="rulesList" :model="temp">
<!--这里为表单内容-->
</el-form>

<script>
export default {
  data() {
    return {
      rules: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        accno: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        accname: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        otp: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        otp_id: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      rules2: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
    }
  },
computed: {
    rulesList: function() {
      if (this.temp.pay_type) {
        return this.rules
      } else {
        return this.rules2
      }
    }
  },

这样就实现了对一个表单进行两套或以上的验证。

另外一种场景是，给某一个字段添加多条验证规则。由于rules接收的是一个数组，我们在数组中再添加一项即可。

比如下面的例子，我又在后面添加了一条自定义的规则

data() {
    const validatePass = (rule, value, callback) => {
      if (this.option) {
        callback(new Error('请选择列表中已有的选项'))
      } else {
        callback()
      }
    }
    return {
        rules: {
            firstContract: [
              { required: true, message: '不能为空', trigger: ['blur', 'change'] },
              { required: true, trigger: 'blur', validator: validatePass }
            ],
        }
    }
}

自定义规则中，validator接受的是我自定义的一套规则validatePass，Error为接受的错误提示。