iview表单验证—自定义验证策略

iview是我们现在比较常用的一个UI库，表单验证最为常见，自带的验证策略可能不符合我们的要求，这时就要自定义一些策略了。 test.png

代码：

<template>
    <div class="wrap">
        <Form :model="taskForm" ref="taskForm" :rules="taskFormRules">
            <FormItem label="任务内容:" prop="taskContent">
                <Input type="textarea" autosize v-model="taskForm.taskContent" placeholder="请输入内容" />
            </FormItem>
            <FormItem label="工作时段:" prop="taskTimeHorizons">
                <Divider style="background:#fff;"></Divider>
                <div class="date-item" v-for="(v,i) in taskForm.taskTimeHorizons" :key="i">
                    <DatePicker  v-model="v['startTime']" format="yyyy-MM-dd HH:mm" type="datetime" style="width: 47%"></DatePicker>
                    ~
                    <DatePicker v-model="v['endTime']" format="yyyy-MM-dd HH:mm" type="datetime" style="width: 47%"></DatePicker>
                </div>
            </FormItem>
            <FormItem label="任务风险:" prop="taskRisks">
                <Select v-model="taskForm['taskRisks']" multiple style="width:260px">
                    <Option v-for="item in riskList" :value="item.code" :key="item.code+'-risk'">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <Button type="primary" size="large"  @click="publish">发布</Button>
        </Form>
    </div>
</template>

<script>
    import moment from 'moment';
    export default {
        name: "test",
        methods:{
            publish(){
                this.$refs['taskForm'].validate((valid) => {
                    if (valid) {
                        this.$Message.success('成功');
                    }else{
                        this.$Message.error('验证失败');
                    }
                })
            }
        },
        mounted(){
        },
        data() {
            const validateDateperiod = (rule, value, callback) => {
                //console.log(value)
                //标准时间格式：2020-05-20 15:15:15
                let flagMessage = ''
                if (value && value.length > 0) {
                    for (let i = 0; i < value.length; i++) {
                        let date1 = value[i]['startTime']
                        let date2 = value[i]['endTime']


                        if (!date1 || !date2) {
                            flagMessage = '时间段不能为空';
                            break;
                        } else {
                            //比较时间
                            let compare_date1 = moment(date1).format('YYYY-MM-DD')
                            let compare_date2 = moment(date2).format('YYYY-MM-DD')
                            if (compare_date1 !== compare_date2) {
                                flagMessage = '起始时间和结束时间必须在同一天'
                                break;
                            }
                            let time1 = new Date(moment(date1).format('YYYY-MM-DD HH:mm:ss')).getTime()
                            let time2 = new Date(moment(date2).format('YYYY-MM-DD HH:mm:ss')).getTime()
                            if (time1 > time2) {
                                flagMessage = '起始时间不得大于结束时间'
                                break;
                            }
                            if (time1 === time2) {
                                flagMessage = '起始时间不得等于结束时间'
                                break;
                            }

                        }
                    }
                }

                if (flagMessage) {
                    callback(new Error(flagMessage))
                } else {
                    callback()
                }
            };
            return {
                riskList:[{code:'0',name:'无'},{code:'1',name:'延期'}],
                taskForm:{
                    taskContent:'',
                    taskTimeHorizons:[{startTime:'',endTime:''}],
                    taskRisks:[],

                },
                taskFormRules:{
                    taskContent: [
                        {required: true, message: '请填写任务内容', trigger: 'blur'}
                    ],
                    taskRisks: [
                        {type:'array',required: true, message: '请选择任务风险'},

                    ],
                    taskTimeHorizons:[
                        {required: true,validator:validateDateperiod},

                    ],
                },
            }
        }
    }
</script>

<style scoped>
.wrap{
    width:90%;
    height:100%;
    margin:0 auto;
}
</style>