el-time-picker实现多表单联动验证

二九加九
172 阅读2分钟

一. 需实现效果下图:

image.png

二. 需满足条件:

  1. 开始检票时间 < 结束检票时间
  2. 开始登轮时间 < 结束登轮时间
  3. 结束检票时间 < 结束登轮时间
  4. 开始检票时间 < 开始登轮时间

1. rules验证条件:

startCheck: [{ validator: validStartCheck, trigger: ['change'] }],

2.validator自定义验证:

data中的var validStartCheck-->在return上方!!!

var validStartCheck = (rule, value, callback) => {
    if(验证失败条件){
        return callback(new Error('报错内容'));
    }else{
        return callback();
    }
}

(1)我们在其内对每个表单单独写一个逻辑:

例如:开始检票时间-->小于结束检票时间, 小于开始登轮时间

(2)想要比大小-->需将拿到的时分转换为时间戳形式

"10:11"转为Number, 通过split拆分,拿到时和分的字符串,再转成数字,单位统一为秒

(3)开始检票时间验证代码如下:

//1.**********************************************************(1)开始检票时间验证******************************************************
var validStartCheck = (rule, value, callback) => {
    //将时分转换为时间戳事件
    const countDown = time => {
        var s = 0;
        var hour = time.split(':')[0];
        // console.log('时钟', hour);
        var min = time.split(':')[1];
        // console.log('分钟', min);
        s = Number(hour * 3600) + Number(min * 60);
        return s;
    };

    //给转换到时间戳的时间赋值-->避免下方代码判断时多次调用countDown事件
    if (this.formData.exDepartTime) {
        var exDepartTime = countDown(this.formData.exDepartTime);
    }
    if (this.formData.acDepartTime) {
        var acDepartTime = countDown(this.formData.acDepartTime);
    }
    if (this.formData.exArrivedTime) {
        var exArrivedTime = countDown(this.formData.exArrivedTime);
    }
    //验证判断
    if (this.formData.exDepartTime) {
        if (this.formData.acDepartTime) {
            if (exDepartTime >= acDepartTime) {
                return callback(new Error('开始检票时间未小于结束检票时间'));
            } else if (this.formData.exArrivedTime) {
                if (exDepartTime >= exArrivedTime) {
                    return callback(new Error('开始检票时间未小于开始登轮时间'));
                } else {
                    return callback();
                }
            } else {
                return callback();
            }
        } else {
            return callback();
        }
    } else {
        return callback(new Error('请选择开始检票时间'));
    }
};

3. 一个表单改变时, 触发四个表单验证

(1)表单改变触发

给每一个四个表单的 'el-time-picker '都绑定相同的change事件

    <el-form-item label="开始检票时间" prop="startCheck">
        <el-time-picker
            v-model="formData.exDepartTime"
            placeholder="选择开始检票时间"
            @change="changeTimeEvent"
        ></el-time-picker>
    </el-form-item>

(2)触发四个表单验证 methods添加事件:

        //检票时间,登轮时间-->改变时,触发表单验证
        changeTimeEvent() {
            this.$refs.form.validateField('startCheck');
            this.$refs.form.validateField('endCheck');
            this.$refs.form.validateField('startBoard');
            this.$refs.form.validateField('endBoard');
        }

全部代码如下:

  问题: 下方 '将时分转换为时间戳事件' 和 '给转换到时间戳的时间赋值-->避免下方代码判断时多次调用countDown事件' 在四个validator事件中基本相同的函数如何写成一个?

如果有更优解法,欢迎提出自己的见解 !

<template>
    <div class="app-container">
        <el-form ref="form" :model="formData" label-width="80px" label-position="right" :inline="true" :rules="rules">
            <div>
                <el-row :gutter="20" class="list">
                    <!--开始检票时间-->
                    <el-col :span="6">
                        <el-form-item label="开始检票时间" prop="startCheck">
                            <el-time-picker
                                v-model="formData.exDepartTime"
                                placeholder="选择开始检票时间"
                                style="width: 200px"
                                format="HH:mm"
                                value-format="HH:mm"
                                :disabled="inputShow"
                                @change="changeTimeEvent"
                            ></el-time-picker>
                        </el-form-item>
                    </el-col>
                    <!--结束检票时间-->
                    <el-col :span="6">
                        <el-form-item label="结束检票时间" prop="endCheck">
                            <el-time-picker
                                v-model="formData.acDepartTime"
                                placeholder="选择结束检票时间"
                                style="width: 200px"
                                format="HH:mm"
                                value-format="HH:mm"
                                :disabled="inputShow"
                                @change="changeTimeEvent"
                            ></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--开始登轮时间-->
                <el-col :span="6">
                    <el-form-item label="开始登轮时间" prop="startBoard">
                        <el-time-picker
                            v-model="formData.exArrivedTime"
                            placeholder="选择开始登轮时间"
                            style="width: 200px"
                            format="HH:mm"
                            value-format="HH:mm"
                            :disabled="inputShow"
                            @change="changeTimeEvent"
                        ></el-time-picker>
                    </el-form-item>
                </el-col>
                <!--结束登轮时间-->
                <el-col :span="6">
                    <el-form-item label="结束登轮时间" prop="endBoard">
                        <el-time-picker
                            v-model="formData.acArrivedTime"
                            placeholder="选择结束登轮时间"
                            style="width: 200px"
                            format="HH:mm"
                            value-format="HH:mm"
                            :disabled="inputShow"
                            @change="changeTimeEvent"
                        ></el-time-picker>
                    </el-form-item>
                </el-col>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'editVoyageTime',
    data() {
        //1.**********************************************************(1)开始检票时间验证******************************************************
        var validStartCheck = (rule, value, callback) => {
            //将时分转换为时间戳事件
            const countDown = time => {
                var s = 0;
                var hour = time.split(':')[0];
                // console.log('时钟', hour);
                var min = time.split(':')[1];
                // console.log('分钟', min);
                s = Number(hour * 3600) + Number(min * 60);
                return s;
            };

            //给转换到时间戳的时间赋值-->避免下方代码判断时多次调用countDown事件
            if (this.formData.exDepartTime) {
                var exDepartTime = countDown(this.formData.exDepartTime);
            }
            if (this.formData.acDepartTime) {
                var acDepartTime = countDown(this.formData.acDepartTime);
            }
            if (this.formData.exArrivedTime) {
                var exArrivedTime = countDown(this.formData.exArrivedTime);
            }
            //验证判断
            if (this.formData.exDepartTime) {
                if (this.formData.acDepartTime) {
                    if (exDepartTime >= acDepartTime) {
                        return callback(new Error('开始检票时间未小于结束检票时间'));
                    } else if (this.formData.exArrivedTime) {
                        if (exDepartTime >= exArrivedTime) {
                            return callback(new Error('开始检票时间未小于开始登轮时间'));
                        } else {
                            return callback();
                        }
                    } else {
                        return callback();
                    }
                } else {
                    return callback();
                }
            } else {
                return callback(new Error('请选择开始检票时间'));
            }
        };

        //2.**********************************************************(2)结束检票时间验证******************************************************
        var validEndCheck = (rule, value, callback) => {
            //将时分转换为时间戳事件
            const countDown = time => {
                var s = 0;
                var hour = time.split(':')[0];
                // console.log('时钟', hour);
                var min = time.split(':')[1];
                // console.log('分钟', min);
                s = Number(hour * 3600) + Number(min * 60);
                return s;
            };

            //给转换到时间戳的时间赋值-->避免下方代码判断时多次调用countDown事件
            if (this.formData.exDepartTime) {
                var exDepartTime = countDown(this.formData.exDepartTime);
            }
            if (this.formData.acDepartTime) {
                var acDepartTime = countDown(this.formData.acDepartTime);
            }
            if (this.formData.acArrivedTime) {
                var acArrivedTime = countDown(this.formData.acArrivedTime);
            }
            //验证判断
            if (this.formData.acDepartTime) {
                if (this.formData.exDepartTime) {
                    if (exDepartTime >= acDepartTime) {
                        return callback(new Error('开始检票时间未小于结束检票时间'));
                    } else if (this.formData.acArrivedTime) {
                        if (acDepartTime >= acArrivedTime) {
                            return callback(new Error('结束检票时间未小于结束登轮时间'));
                        } else {
                            return callback();
                        }
                    } else {
                        return callback();
                    }
                } else {
                    return callback();
                }
            } else {
                return callback(new Error('请选择结束检票时间'));
            }
        };

        //3.**********************************************************(3)开始登轮时间******************************************************
        var validStartBoard = (rule, value, callback) => {
            //将时分转换为时间戳事件
            const countDown = time => {
                var s = 0;
                var hour = time.split(':')[0];
                // console.log('时钟', hour);
                var min = time.split(':')[1];
                // console.log('分钟', min);
                s = Number(hour * 3600) + Number(min * 60);
                return s;
            };

            //给转换到时间戳的时间赋值-->避免下方代码判断时多次调用countDown事件
            if (this.formData.exDepartTime) {
                var exDepartTime = countDown(this.formData.exDepartTime);
            }
            if (this.formData.exArrivedTime) {
                var exArrivedTime = countDown(this.formData.exArrivedTime);
            }
            if (this.formData.acArrivedTime) {
                var acArrivedTime = countDown(this.formData.acArrivedTime);
            }
            //验证判断
            if (this.formData.exArrivedTime) {
                if (this.formData.acArrivedTime) {
                    if (exArrivedTime >= acArrivedTime) {
                        return callback(new Error('开始登轮时间未小于结束登轮时间'));
                    } else if (this.formData.exDepartTime) {
                        if (exDepartTime >= exArrivedTime) {
                            return callback(new Error('开始检票时间未小于开始登轮时间'));
                        } else {
                            return callback();
                        }
                    } else {
                        return callback();
                    }
                } else {
                    return callback();
                }
            } else {
                return callback(new Error('请选择开始登轮时间'));
            }
        };

        //4.**********************************************************(4)结束登轮时间******************************************************
        var validEndBoard = (rule, value, callback) => {
            //将时分转换为时间戳事件
            const countDown = time => {
                var s = 0;
                var hour = time.split(':')[0];
                // console.log('时钟', hour);
                var min = time.split(':')[1];
                // console.log('分钟', min);
                s = Number(hour * 3600) + Number(min * 60);
                return s;
            };

            //给转换到时间戳的时间赋值-->避免下方代码判断时多次调用countDown事件
            if (this.formData.acDepartTime) {
                var acDepartTime = countDown(this.formData.acDepartTime);
            }
            if (this.formData.exArrivedTime) {
                var exArrivedTime = countDown(this.formData.exArrivedTime);
            }
            if (this.formData.acArrivedTime) {
                var acArrivedTime = countDown(this.formData.acArrivedTime);
            }
            //验证判断
            if (this.formData.acArrivedTime) {
                if (this.formData.exArrivedTime) {
                    if (exArrivedTime >= acArrivedTime) {
                        return callback(new Error('开始登轮时间未小于结束登轮时间'));
                    } else if (this.formData.acDepartTime) {
                        if (acDepartTime >= acArrivedTime) {
                            return callback(new Error('结束检票时间未小于开始登轮时间'));
                        } else {
                            return callback();
                        }
                    } else {
                        return callback();
                    }
                } else {
                    return callback();
                }
            } else {
                return callback(new Error('请选择结束登轮时间'));
            }
        };
        return {
            rules: {
                startCheck: [{ validator: validStartCheck, trigger: ['change'] }],
                endCheck: [{ validator: validEndCheck, trigger: ['change'] }],
                startBoard: [{ validator: validStartBoard, trigger: ['change'] }],
                endBoard: [{ validator: validEndBoard, trigger: ['change'] }]
            }
        };
    },
    methods: {
        //检票时间,登轮时间-->改变时,触发表单验证
        changeTimeEvent() {
            this.$refs.form.validateField('startCheck');
            this.$refs.form.validateField('endCheck');
            this.$refs.form.validateField('startBoard');
            this.$refs.form.validateField('endBoard');
        }
    }
};
</script>
avatar
文章
阅读
粉丝