Ant Design of Vue a-form表單效驗用法(二)
(這里添加上期的間隔效驗用法：v-if導致的表單不能效驗問題，moment時間的用法，表單回調)
效果圖：
1、（選中周期時在選中生效時段，失去焦點后效驗：）
2、
1、（首日、最后一日、幾號 同）
2、
（這里考慮到如果先選擇生效時段在選周期的話，采用提交表單時效驗）
HTML:
<template>
<div class="createRules">
<a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }" @submit="handleSubmit">
<div v-show="showVaildTypeInterval">
<a-form-item label="間隔周期" v-show="intervalShow">
<a-radio-group @change="intervalPeriod" v-decorator="['ruleVaildIntervalTime.interval', { rules: [{ required: true, message: '請選擇間隔周期!' }] }]">
<a-radio-button value="每日">每日</a-radio-button>
<a-radio-button value="每周">每周</a-radio-button>
<a-radio-button value="每月">每月</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item label="選擇周期" v-show="period">
<a-checkbox-group v-decorator="['ruleVaildIntervalTime.exWeekly', { rules: [{ required: weekRequired, message: '請選擇周期!' }] }]">
<a-checkbox value="周一">周一</a-checkbox>
<a-checkbox value="周二">周二</a-checkbox>
<a-checkbox value="周三">周三</a-checkbox>
<a-checkbox value="周四">周四</a-checkbox>
<a-checkbox value="周五">周五</a-checkbox>
<a-checkbox value="周六">周六</a-checkbox>
<a-checkbox value="周日">周日</a-checkbox>
</a-checkbox-group>
</a-form-item>
<a-form-item label="選擇周期" v-show="periodDate">
<a-radio-group @change="periodType" v-decorator="['ruleVaildIntervalTime.exMonthly1', { rules: [{ required: monthRequired, message: '請選擇每月周期!' }] }]">
<a-radio value="首日">首日</a-radio>
<a-radio value="最后一日">最后一日</a-radio>
<a-radio value="幾號"></a-radio>
</a-radio-group>
<a-input-number :min="2" :max="30" style="width: 50px; margin-right: 8px" placeholder="N" :disabled="monthDisabled" v-decorator="['ruleVaildIntervalTime.exMonthly2', { rules: [{ required: requiredDay, message: '請輸入幾號!' }] }]"/>
<label>日</label>
</a-form-item>
<a-row type="flex" align="top">
<a-col :span="6">
<a-form-item label="起止時間" v-if="endingTime" :labelCol="{span: 9}" :wrapper-col="{ span: 8 }">
<a-time-picker :open.sync="open" format="HH:mm" placeholder="開始" style="width: 80px" @change="(val,dateStrings)=>changeTime(val,dateStrings,'startTime')" v-decorator="['ruleVaildIntervalTime.exDateTimeOnt', { rules: [{ required: requiredIntervalTime, message: '請選擇開始時間!' }] }]"
>
<a-button slot="addon" size="small" type="primary" @click="handleClose">確定</a-button>
</a-time-picker>
</a-form-item>
</a-col>
<a-col style="height: 40px;line-height: 40px;padding: 0 2px">~</a-col>
<a-col :span="10">
<a-form-item>
<a-time-picker :open.sync="open2" format="HH:mm" placeholder="結束" style="width: 80px" :disabledHours="getDisabledHours" :disabledMinutes="getDisabledMinutes" @change="(val,dateStrings)=>changeTime(val,dateStrings,'endTime')" v-decorator="['ruleVaildIntervalTime.exDateTimeTwo', { rules: [{ required: requiredIntervalTime, message: '請選擇結束時間!' }] }]"
>
<a-button slot="addon" size="small" type="primary" @click="handleClose">確定</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-select style="width: 110px;margin-right:8px" @change="allTime" v-decorator="['dayType', { rules: [{ required: true}] }]"
>
<a-select-option :value="0">全時段</a-select-option>
<a-select-option :value="1">自定義</a-select-option>
<a-select-option :value="2">非交易日</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="10">
<a-form-item>
<a-range-picker format="YYYY-MM-DD" style="width: 370px" :placeholder="['開始日期', '結束日期']" :disabled="disableds" :disabled-date="handleData" v-decorator="['customTime', { rules: [{ type: 'array', required: requiredTime, message: '請選擇生效時段!' }] }]" @blur="customTimeBlur"
/>
</a-form-item>
</a-col>
</a-row>
</div>
</a-form>
</div>
</template>
JavaScritp
<script> import moment from 'moment'
//要引用ant Design組件
export default { name: 'CreateRules', data () { return { period: true, periodDate: false, disableds: false, monthDisabled: true, intervalShow: true, requiredTime: true, requiredIntervalTime: true, requiredDay: true, endingTime: true, weekRequired: true, monthRequired: true, efficacyState: true, showVaildTypeInterval: true, open: false, open2: false, timeDisabled: true, startTime: '00:00', endTime: '23:59', alldefaultValue: '全時段', } }, beforeCreate () { this.form = this.$form.createForm(this, { name: 'coordinated' }) }, mounted () { this.resetForm() }, methods: { moment, handleClose () { this.open = false
this.open2 = false }, handleCloseContinuous () { this.continuousOpen = false
this.continuousOpen2 = false }, // @blur： 選中日期后失去焦點時效驗
// 間隔 效驗頻率是否在維護時段內
customTimeBlur (e) { this.form.validateFields(['ruleVaildIntervalTime.interval', 'ruleVaildIntervalTime.exMonthly1', 'ruleVaildIntervalTime.exMonthly2'], (errors, values) => { if (!errors && e.target.value) { this.soundEffects(e, values) } }) }, // 我這里封裝好了一個方法，主要用在兩個地方：表單點擊選擇效驗、表單提交時效驗（這里表單提交時是傳一個空e）
soundEffects (e, values) { console.log('生效時段效驗:', values) const everyDay = [] const everyDayString = [] const findMonthDay = [] // 拿到開始結束時間的時間戳來對間隔類型繼續比較
// 一天的時間戳為：86400000
const startTime = (e === '' ? moment(moment(values.customTime[0]).valueOf()).format('YYYY-MM-DD') : moment(moment(e.target.value.substring(1, 33)).valueOf()).format('YYYY-MM-DD')) const endTime = (e === '' ? moment(moment(values.customTime[1]).valueOf()).format('YYYY-MM-DD') : moment(moment(e.target.value.substring(34, 67)).valueOf()).format('YYYY-MM-DD')) const formatStartTime = moment(startTime).valueOf() - 86400000 const formatEndTime = moment(endTime).valueOf() const yearEndDay = [] // 獲取每月最后一日（1-30 這樣的格式）
for (let i = 0; i < 12; i++) { yearEndDay.push((i + 1) + '-' + moment(moment().month(i).endOf('month').format('YYYY-MM-DD')).date()) } // 獲取時間戳的每天
for (let i = formatEndTime; i > formatStartTime; i -= 86400000) { everyDay.push(moment(i).date()) } // 通過時間戳來獲取每月最后一日 （1-30 這樣的格式）（時間戳.month()拿到的月是從0開始）
for (let i = formatEndTime; i > formatStartTime; i -= 86400000) { everyDayString.push((moment(i).month() + 1) + '-' + moment(i).date()) } // 通過比較上下最后一日來判斷 選中每月最后一日是否在指定的日期范圍內
yearEndDay.forEach(res => { if (everyDayString.find(item => item === res) !== undefined) { findMonthDay.push(everyDayString.find(item => item === res)) } }) if (values.ruleVaildIntervalTime.interval === '每月') { if (values.ruleVaildIntervalTime.exMonthly1 === '首日' && everyDay.find(item => item === 1) === undefined || values.ruleVaildIntervalTime.exMonthly1 === '幾號' && everyDay.find(item => item === values.ruleVaildIntervalTime.exMonthly2) === undefined || values.ruleVaildIntervalTime.exMonthly1 === '最后一日' && findMonthDay.length === 0 ) { const arr = [{ message: '維護時段不在范圍內!', field: 'customTime' }] this.form.setFields({ customTime: { value: [], errors: arr } }) this.efficacyState = false } else { this.efficacyState = true } } else { this.efficacyState = true } // 這里主要用到表單提交時效驗是否通過進行傳參
if (this.efficacyState) { this.$emit('getResult2', values, true) } else { this.$emit('getResult2', values, false) } }, // 時間約束（時分）
changeTime (val, dateStrings, type) { if (type === 'startTime') { this.startTime = dateStrings } else { this.endTime = dateStrings } }, 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 [] } }, handleData (current) { return current && current + 1 < moment().endOf('day').subtract(1, 'day') }, allTime (val) { if (val === 0) { console.log('全時段') this.disableds = true
this.requiredTime = false
this.alldefaultValue = '全時段'
// 這里form表單提交時 數據不能為null、undefined,不然傳值的時候全部值都為空
// this.form.resetFields('customTime', [])
this.form.setFields({ 'customTime': { value: [] } }) } else if (val === 1) { console.log('自定義') this.disableds = false
this.requiredTime = true
this.alldefaultValue = '自定義' } else { console.log('非交易日') this.disableds = false
this.requiredTime = true
this.alldefaultValue = '非交易日' } }, resetForm () { this.$nextTick(() => { this.form.setFieldsValue({ // 維護狀態form表綁定值，可以是一個自定義對象
ruleVaildIntervalTime: { interval: '每周', exWeekly: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], exMonthly1: '', exMonthly2: '', exDateTimeOnt: moment('00:00', 'HH:mm'), exDateTimeTwo: moment('23:59', 'HH:mm'), }, customTime: [], dayType: 0, }) }) }, intervalPeriod (val) { if (val.target.value === '每日') { this.period = false
this.periodDate = false
this.weekRequired = false
this.monthRequired = false } else if (val.target.value === '每周') { this.period = true
this.periodDate = false
this.weekRequired = true
this.monthRequired = false } else if (val.target.value === '每月') { this.period = false
this.periodDate = true
this.weekRequired = false
this.monthRequired = true } }, periodType (val) { if (val.target.value === '幾號') { this.monthDisabled = false
this.requiredDay = true } else { this.monthDisabled = true
this.requiredDay = false } }, // 提交哦（提交的話，自己自定義添加的效驗，提交時應該在效驗一次，例： this.soundEffects(e, values)這個方法）
handleSubmit () { this.form.validateFields((err, values) => { console.log('Received values of form: ', values) // 這里的提交效驗（自己自定義的效驗）我就不寫了
}) } } } </script>
v-if導致的表單不能效驗問題
（很多時候在操作v-if、v-show的時候會使得表單中的自動效驗未能生效）
- 使用v-if：v-if用來切換的元素是會被銷毀的，導致了
v-if內的表單項，由於在mounted時期沒有進行渲染，所以規則也沒有綁定上。
初始化時不符合顯示條件的不會生成規則，導致后面切換條件，顯示的輸入框的校驗不會生效 - 使用
v-show：初始化時會生成所有的規則，即使隱藏了也會進行規則校驗
方法：全部改為v-show
form表單api: https://www.antdv.com/components/form-cn/#API
（表單用法差不多就這些，如果有那些看不懂或者有疑惑都有下方留言！）