vue后台表单（联系电话和时间选择器的自定义校验规则）

最新推荐文章于 2024-06-04 14:59:00 发布

怼怼爱吃瓜

最新推荐文章于 2024-06-04 14:59:00 发布

阅读量570

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59638475/article/details/131471523

版权

1.联系电话的自定义校验规则

  // 联系电话校验
        validateMobilePhone (rule, value, callback) {
            if (value === '') {
                callback(new Error('请输入负责人联系电话'))
            } else {
                if (value !== '') {
                    let reg = /^1[3456789]\d{9}$/ // 正则校验
                    if (!reg.test(value)) {
                        callback(new Error('请输入有效的手机号码'))
                    }
                }
                callback()
            }
        },

2.时间选择器组件的自定义校验规则

如果我们选择绑定值的格式化是年月日类型的，以下是我们的校验规则处理

  // 报名起至时间校验 （这是年月日时分秒的格式化校验处理）
        validateStartTime(rule, value, callback) {
            const endTime = this.form.endTime
            if (!value) {
                callback(new Error('请输入报名时间'))
            } else if (endTime && value >= endTime) {
                callback(new Error('开始时间需早于结束时间'))
            } else {
                callback()
            }
        },
        validateEndTime(rule, value, callback) {
            const startTime = this.form.startTime
            const isTime = new Date(startTime) < new Date()
            if (!value) {
                callback(new Error('请输入报名时间'))
            } else if (value <= startTime) {
                callback(new Error('结束时间需晚于开始时间'))
            } else if (isTime && new Date(value).getTime() <= Date.now()) {
                callback(new Error('结束时间需晚于当前时间'))
            } else {
                callback()
            }
        },

  // 这是 value-format="timestamp" 时间戳的格式化处理
 validateStartTime(rule, value, callback) {
            const endTime = +this.form.endTime
            if (!value) {
                callback(new Error('请输入报名时间'))
            } else if (endTime && new Date(value) >= new Date(endTime)) { 
                // 转换为时间戳去进行比较
                callback(new Error('开始时间需早于结束时间'))
            } else {
                callback()
            }
        },
        validateEndTime(rule, value, callback) {
            const startTime = +this.form.startTime
            const isGoing = new Date(startTime) < new Date()
            if (!value) {
                callback(new Error('请输入报名时间'))
            } else if (new Date(value) <= new Date(startTime)) {
                callback(new Error('结束时间需晚于开始时间'))
            } else if (isGoing && new Date(value) <= new Date()) {
                callback(new Error('结束时间需晚于当前时间'))
            } else {
                callback()
            }
        },