Avue动态校验表单的必填校验

目录

• validate.js
• user.vue

关键点：
①、使用 this.findObject(this.option.column, 'password'),找到prop字段，然后定义规则。
②、绑定 :before-open="beforeOpen" 方法，这样可以在弹框弹出前做自己的逻辑。

完整代码：

validate.js

export const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
export const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== this.form.password) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

user.vue

<template>
  <avue-crud v-bind="bindVal" v-on="onEvent" v-model="form" :page.sync="page"
             :before-open="beforeOpen"
             :header-cell-class-name="headerStyle">
    <template slot="menuLeft">
      <div class="table-title-style">用戶列表</div>
    </template>
  </avue-crud>
</template>

<script>
  import {curdMixin} from '../../../mixins/crud'
  import {validatePass, validatePass2} from '../../../utils/validate'

  export default {
    mixins: [curdMixin],
    data () {
      return {
        passwordRequired: true,
        config: {
          save: '/sys/user/save',
          delete: '/sys/user/delete',
          update: '/sys/user/update',
          list: '/sys/user/list'
        },
        option: {
          index: true,
          align: 'center',
          headerAlign: 'center',
          border: true,
          stripe: true,
          refreshBtn: true,
          columnBtn: false,
          excelBtn: true,
          labelWidth: 120,
          searchLabelWidth: 120,
          column: [
            {
              label: '用戶名',
              prop: 'username',
              search: true,
              rules: [{
                required: true,
                message: '用戶名不能为空',
                trigger: 'blur'
              }]
            },
            {
              label: '角色',
              prop: 'role',
              props: {
                label: 'roleName',
                value: 'roleId'
              },
              remote: true,
              dicUrl: this.$http.adornUrl(`/sys/role/options`),
              dicMethod: 'get',
              type: 'select'
            },
            {
              label: '密码',
              prop: 'password',
              type: 'password',
              showColumn: false
            }, {
              label: '确认密码',
              prop: 'comfirmPassword',
              type: 'password',
              showColumn: false
            },
            {
              label: '所屬施工店',
              prop: 'constructionShop',
              props: {
                label: 'name',
                value: 'id'
              },
              remote: true,
              dicUrl: this.$http.adornUrl(`/mcl/constructionshop/options`),
              dicMethod: 'get',
              type: 'select'
            },
            {
              label: '聯繫方式',
              prop: 'phone'
            }
          ]
        }
      }
    },
    methods: {
      beforeOpen (done, type) {
        console.log(`我是${type}`)
        let password = this.findObject(this.option.column, 'password')
        let comfirmPassword = this.findObject(this.option.column, 'comfirmPassword')
        if (type === 'add') {
          password.rules = [{required: true, validator: validatePass, trigger: 'blur'}]
          comfirmPassword.rules = [{required: true, validator: validatePass2, trigger: 'blur'}]
        } else {
          password.rules = [{required: false, validator: validatePass, trigger: 'blur'}]
          comfirmPassword.rules = [{required: false, validator: validatePass2, trigger: 'blur'}]
        }
        done()
      }
      // beforeClose (done, type) {
      //   console.log(`我是${type}`)
      //   done()
      // }
    }
  }
</script>

<style scoped>

</style>