使用vue表单验证库async-validator封装Form表单组件

src/components/data/seller/create/contract.vue

<template>
  <create-portlet title="合同信息">
    <j-form :model="model" ref="form">
      <div class="row">

        <div class="col-xs-4">
          <j-form-item
            prop="contract.cooperationTypeMap"
            :rules="[
            {validator: selectRequired, message: '合作方式必须', trigger: 'change'}
            ]"
          >
            <j-select
              v-model="model.contract.cooperationTypeMap"
              :options="methodCooperation"
            >
              <span slot="left" class="input-group-addon">合作方式:</span>
              <span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
            </j-select>
          </j-form-item>
        </div>

        <div class="col-xs-4">
          <j-form-item
            prop="contract.isSignContract"
            :rules="[
              {required: true, message: '是否签合同必须', trigger: 'change'}
            ]"
          >
            <div class="input-group j-input-group">
              <span class="input-group-addon">是否签合同:</span>
              <j-radio-group v-model="model.contract.isSignContract">
                <j-radio checked-value="1">是</j-radio>
                <j-radio checked-value="0">否</j-radio>
              </j-radio-group>
              <span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
            </div>
          </j-form-item>
        </div>

        <template v-if="model.contract.isSignContract == 1">
          <div class="col-xs-4">
            <j-form-item
              prop="contract.startTime"
              :rules="[
                    {required: true, message: '合同结束时间必须', trigger: 'change'}
                  ]"
            >
              <j-date-group
                v-model="model.contract.startTime"
                :end-date="model.contract.endTime"
              >
                <span slot="left" class="input-group-addon">合同开始时间:</span>
                <span slot="right" class="input-group-addon font-red">*</span>
              </j-date-group>
            </j-form-item>
          </div>

          <div class="col-xs-4">
            <j-form-item
              prop="contract.endTime"
              :rules="[
                    {required: true, message: '合同结束时间必须', trigger: 'change'}
                  ]"
            >
              <j-date-group
                v-model="model.contract.endTime"
                :start-date="model.contract.startTime"
              >
                <span slot="left" class="input-group-addon">合同结束时间:</span>
                <span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
              </j-date-group>
            </j-form-item>
          </div>

          <div class="col-xs-4">
            <j-form-item
              prop="contract.contractNo"
              :rules="
            [
              {required: true, message: '合同编号必须', trigger: 'blur'},
              {validator: range, min: 1, max: 20, isString: true, message: '合同编号必须1-20字', trigger: 'blur'},
              {validator: eliminateSpace, message: '合同编号不能有空格', trigger: 'blur'}
            ]"
            >
              <j-input-group
                v-model="model.contract.contractNo"
              >
                <span slot="left" class="input-group-addon">合同编号:</span>
                <span slot="right" class="input-group-addon"><span class="font-red">*</span></span>
              </j-input-group>
            </j-form-item>
          </div>
        </template>


      </div>

    </j-form>
  </create-portlet>
</template>
<script>
  import createPortlet from 'components/base/createPortlet'
  import {
    isPhone,
    selectRequired,
    arrayRequired,
    isNumber,
    requiredIf,
    range,
    isText,
    eliminateSpace
  } from 'assets/scripts/base/validator'
  import {unixTimestampFilter} from 'assets/scripts/base/filters'
  import {getMerchantCooperationWay} from 'assets/scripts/business/store'
  import {mapGetValue, isEqual, dotData} from 'assets/scripts/base/functions'
  import cascadeAddress from 'components/base/cascadeAddress'
  import jFormItem from 'components/base/form/jFormItem'
  import jInputGroup from 'components/base/form/jInputGroup'
  import jForm from 'components/base/form/jForm'
  import jSelect from 'components/base/form/jSelect'
  import jDateGroup from 'components/base/form/jDateGroup'
  import jAddressGroup from 'components/base/form/jAddressGroup'
  import jCheckbox from 'components/base/form/jCheckbox'
  import jCheckboxGroup from 'components/base/form/jCheckboxGroup'
  import jRadio from 'components/base/form/jRadio'
  import jRadioGroup from 'components/base/form/jRadioGroup'
  export default {
    name: 'dataSellerCreateCompany',
    components: {
      createPortlet,
      cascadeAddress,
      jFormItem,
      jInputGroup,
      jForm,
      jSelect,
      jDateGroup,
      jAddressGroup,
      jCheckbox,
      jCheckboxGroup,
      jRadio,
      jRadioGroup
    },
    props: {
      detail: {
        type: Object,
        required: true
      }
    },
    data () {
      return {
        model: {
          contract: {
            startTime: '',
            endTime: '',
            isSignContract: '1',
            cooperationTypeMap: {value: '', text: ''},
            contractNo: ''
          }
        },
        methodCooperation: []
      }
    },
    watch: {
      detail (val, oldVal) {
        if (isEqual(val, oldVal)) {
          return
        }
        // 合作方式
        const cooperationType = dotData(val, 'merchantContractInfo.cooperationType') || dotData(val, 'contract.cooperationType')
        if (cooperationType) {
          this.model.contract.cooperationTypeMap = {value: cooperationType, text: ''}
        }
        // 合同
        let isSignContract = dotData(val, 'merchantContractInfo.isSignContract')
        if (isSignContract !== 0 || isSignContract !== 1) {
          isSignContract = dotData(val, 'contract.isSignContract')
        }
        isSignContract = String(isSignContract)
        if (isSignContract === '0' || isSignContract === '1') {
          this.model.contract.isSignContract = isSignContract
        }
        // 开始时间
        const startTime = dotData(val, 'merchantContractInfo.startTime') || dotData(val, 'contract.startTime')
        this.model.contract.startTime = unixTimestampFilter(startTime, 'YYYY-MM-DD')

        const endTime = dotData(val, 'merchantContractInfo.endTime') || dotData(val, 'contract.endTime')
        if (endTime) {
          this.model.contract.endTime = unixTimestampFilter(endTime, 'YYYY-MM-DD')
        }

        const contractNo = dotData(val, 'merchantContractInfo.contractNo') || dotData(val, 'contract.contractNo')
        this.model.contract.contractNo = contractNo
        this.model.contract.id = dotData(val, 'merchantContractInfo.id') || dotData(val, 'contract.id')
      }
    },
    created () {
      getMerchantCooperationWay().then(arr => {
        this.methodCooperation = arr
      })
    },
    methods: {
      isPhone,
      selectRequired,
      arrayRequired,
      isNumber,
      requiredIf,
      range,
      isText,
      eliminateSpace,
      // 验证并获取数据
      getModel () {
        return this.$refs.form.validate().then((result) => {
          if (result) {
            let data = this.model
            return mapGetValue(data)
          }
          return result
        })
      },
      // 获取数据没有验证
      getModelWithoutValidation () {
        let data = this.model
        return mapGetValue(data)
      }
    }
  }
</script>

点击 公司地址输入框：弹出地址选择 组件：

src/components/data/seller/create/company.vue

<template>
  <create-portlet title="公司信息">
    <j-form :model="model" ref="form">
      <div class="row">

        <div class="col-xs-3 col-sm-3">
          <j