Ant Design of Vue a-form表單效驗用法

　　（ 這個表單基本上算是比較完整的，能完成表單回撥、拿值、效驗、v-fow等，表單基本用法了 ）

效果圖：

1、

2、

因為我這個功能是企業開發中 所以暫時不能把原始碼發出，我先提出時間效驗邏輯：

HTML:

        <a-row>
          <a-col :span="6" :offset="1">
            <a-form-item label="開始時間" :labelCol="{span: 9}" :wrapper-col="{ span: 12 }">
              <a-date-picker
                format
 
="YYYY-MM-DD"
                style="width: 125px;"
                allowClear
                v-show="continuousTime"
                :disabled-date="handleData"
                v-decorator="['continuousStartTime', { rules: [{ required: startTimeRequired, message: '請選擇開始日期!' }] }]"
                @openChange
 
="continuousStartTimeOpenChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item>
              <a-time-picker
                :open.sync="continuousOpen"
                format="HH:mm"
                placeholder
 
="開始"
                style="width: 80px;"
                @change="(val,dateStrings)=>changeTime(val,dateStrings,'startTime')"
                @openChange="continuousStartTimeOpenChange"
                v-decorator="['experssion.continuousDateTimeOnt', { rules: [{ required: continuousDateTimeOntRequired, message: '請選擇開始時間!' }] }]"
              >
                <a-button slot="addon" size="small" type="primary" @click="handleCloseContinuous">確定</a-button>
              </a-time-picker>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="6" :offset="1">
            <a-form-item label="結束時間" :labelCol="{span: 9}" :wrapper-col="{ span: 12 }">

              <a-date-picker
                format="YYYY-MM-DD"
                style="width: 125px;"
                allowClear
                v-show="continuousTime"
                :disabled-date="handleData"
                v-decorator="['continuousEndTime', { rules: [{ required: startTimeRequired, message: '請選擇結束日期!' }] }]"
                @openChange="continuousStartTimeOpenChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item>
              <a-time-picker
                :open.sync="continuousOpen2"
                format="HH:mm"
                placeholder="結束"
                style="width: 80px;"
                :disabledHours="getDisabledHours"
                :disabledMinutes="getDisabledMinutes"
                @change="(val,dateStrings)=>changeTime(val,dateStrings,'endTime')"
                v-decorator="['experssion.continuousDateTimeTwo', { rules: [{ required: continuousDateTimeOntRequired, message: '請選擇結束時間!' }] }]"
              >
                <a-button slot="addon" size="small" type="primary" @click="handleCloseContinuous">確定</a-button>
              </a-time-picker>
            </a-form-item>
          </a-col>
        </a-row>

JS:

    methods: {
        // 約束時間選擇範圍： 時
      getDisabledHours () {
         if (this.timeDisabled) {
            const hours = []
            const time = this.startTime
            const timeArr = time.split(':')
            for (let i = 0; i < parseInt(timeArr[0]); i++) {
               hours.push(i)
            }
            return hours
         } else {
            return []
         }
      },
      // 約束時間選擇範圍： 分
      getDisabledMinutes (selectedHour) {
         if (this.timeDisabled) {
            const time = this.startTime
            const timeArr = time.split(':')
            const minutes = []
            if (selectedHour === parseInt(timeArr[0])) {
               for (let i = 0; i < parseInt(timeArr[1]) + 1; i++) {
                  minutes.push(i)
               }
            }
            return minutes
         } else {
            return []
         }
      },
      // 選擇日期或者時間關閉視窗後（效驗日期是否規範、以及是否開啟約束時間選擇範圍）
      continuousStartTimeOpenChange (status) {
         if (!status) {
            this.$nextTick(() => {
               this.form.validateFields([
                  'continuousStartTime',
                  'continuousEndTime',
                  'experssion.continuousDateTimeOnt',
                  'experssion.continuousDateTimeTwo'], (errors, values) => {
                  if (!errors && values) {
                     const formatStartTime = moment(moment(moment(values.continuousStartTime).valueOf()).format('YYYY-MM-DD')).valueOf()
                     const formatEndTime = moment(moment(moment(values.continuousEndTime).valueOf()).format('YYYY-MM-DD')).valueOf()
                     if (formatStartTime !== formatEndTime) {
                        this.timeDisabled = false
                        // 判斷時間差
                     } else if (formatStartTime === formatEndTime && moment(values.experssion.continuousDateTimeTwo).diff(moment(values.experssion.continuousDateTimeOnt), 'minutes') < 0) {
                        this.timeDisabled = true
                        const arr = [{
                           message: '重新選擇開始時間!',
                           field: 'experssion.continuousDateTimeOnt'
                        }]
                        const arr2 = [{
                           message: '重新選擇結束時間!',
                           field: 'experssion.continuousDateTimeTwo'
                        }]
                        this.form.setFields({ 'experssion.continuousDateTimeOnt': { value: values.experssion.continuousDateTimeOnt, errors: arr } })
                        this.form.setFields({ 'experssion.continuousDateTimeTwo': { value: values.experssion.continuousDateTimeTwo, errors: arr2 } })
                     } else {
                        this.timeDisabled = true
                     }
                     if (formatStartTime > formatEndTime) {
                        const arr = [{
                           message: '日期不規範!',
                           field: 'continuousStartTime'
                        }]
                        const arr2 = [{
                           message: '日期不規範!',
                           field: 'continuousEndTime'
                        }]
                        this.form.setFields({ continuousStartTime: { value: values.continuousStartTime, errors: arr } })
                        this.form.setFields({ continuousEndTime: { value: values.continuousEndTime, errors: arr2 } })
                     }
                  }
               })
            })
         }
      },
      resetForm () {//mounted()中執行
         this.$nextTick(() => {
            this.form.setFieldsValue({
               // 維護狀態form表回填
               experssion:{
                  continuousDateTimeOnt: moment('00:00', 'HH:mm'),
                  continuousDateTimeTwo: moment('23:59', 'HH:mm')
               },
               continuousStartTime: moment(),
               continuousEndTime: moment()
            })
         })
      },
   }

要求效果圖：

（時間約束）

1、開始結束為1天時：

2、開始結束不是一天時：

（日期規範）

先選擇結束時間後在選開始時間

多看官方文件api：

https://www.antdv.com/docs/vue/introduce-cn/

（日期效驗就先弄到這，後期會提供間隔型別的日期效驗以及資料回填、v-if導致的沒有效驗問題）