AntDesignofVuea-form表单效验⽤法（⼀）
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"
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="开始"
@change="(val,dateStrings)=>changeTime(val,dateStrings,'startTime')"
@openChang e="continuousStartTimeOpenChange"
v-decorator="['inuousDateTimeOnt', { 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"
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="结束"
:disabledHours="getDisabledHours"
:
disabledMinutes="getDisabledMinutes"
@change="(val,dateStrings)=>changeTime(val,dateStrings,'endTime')"
v-decorator="['inuousDateTimeTwo', { 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',
'inuousDateTimeOnt',
'inuousDateTimeTwo'], (errors, values) => {
if (!errors && values) {
const formatStartTime = moment(moment(inuousStartTime).valueOf()).format('YYYY-MM-DD')).valueOf()
const formatEndTime = moment(moment(inuousEndTime).valueOf()).format('YYYY-MM-DD')).valueOf()
if (formatStartTime !== formatEndTime) {
this.timeDisabled = false
// 判断时间差
              // 这⾥判断时间差的话，如果时间的年⽉不⼀样的话，还是得通过时间戳判读时间⼤⼩
              //inuousDateTimeOnt).valueOf() > moment(inuousDateTimeOnt).format('YYYY-MM-DD') + ' ' +      inuousDateTimeTwo).format('HH:mm:ss')).valueOf()
antdesignvue 表格合计
} else if (formatStartTime === formatEndTime && inuousDateTimeTwo).diff(inuousDateTimeOnt), 'minutes') < 0) { this.timeDisabled = true
const arr = [{
message: '重新选择开始时间!',
field: 'inuousDateTimeOnt'
}]
const arr2 = [{
message: '重新选择结束时间!',
field: 'inuousDateTimeTwo'
}]
this.form.setFields({ 'inuousDateTimeOnt': { value: inuousDateTimeOnt, errors: arr } })
this.form.setFields({ 'inuousDateTimeTwo': { value: inuousDateTimeTwo, errors: arr2 } })
} else {
this.timeDisabled = true
}
if (formatStartTime > formatEndTime) {
const arr = [{
message: '⽇期不规范!',
field: 'continuousStartTime'
}]
const arr2 = [{
message: '⽇期不规范!',
field: 'continuousEndTime'
}]
this.form.setFields({ continuousStartTime: { value: inuousStartTime, errors: arr } })
this.form.setFields({ continuousEndTime: { value: inuousEndTime, errors: arr2 } })                    }
}
})
})
}
},
resetForm () {//mounted()中执⾏
this.$nextTick(() => {
      // form表绑定的v-decorator回填
        this.form.setFieldsValue({
          experssion:{
            continuousDateTimeOnt: moment('00:00', 'HH:mm'),
            continuousDateTimeTwo: moment('23:59', 'HH:mm')
          },
          continuousStartTime: moment(), continuousEndTime: moment()
        })
      })
    },
}
要求效果图：
（时间约束）
1、开始结束为1天时：
2、开始结束不是⼀天时：
（⽇期规范）
先选择结束时间后在选开始时间：
多看官⽅⽂档api：
（⽇期效验就先弄到这，后期会提供间隔类型的⽇期效验以及数据回填、v-if导致的没有效验问题）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。