专业编程基础技术教程

网站首页 > 基础教程 正文

Jquery实时校验,逐位校验「时刻」

ccvgpt 2024-07-21 17:45:11 基础教程 11 ℃

时刻范围【00:00~23:59】。

录入需求:

Jquery实时校验,逐位校验「时刻」

1、实时校验输入的每一位数据,保证每一位都是有效数据。

2、未输满,失去焦点的话,自动补0,凑成合法的时刻。

比如输入1,焦点离开后自动显示10:00。

比如输入103,焦点离开后自动显示10:30。

HTML代码

<input type="text" class="force-time-format" .../>

JS调用方法

    $(document.body).find("input[type=text]").each(function() {
        // 验证输入内容
        callCustomiseInputCheck(this);
    });

逐位校验【时刻】数据的方法

function callCustomiseInputCheck(inputObject) {
    jQuery.each(inputObject.classList, function(itemIndex, classItem) {
        //验证时刻
        //例:<input type="text" class="force-time-format" .../>
        if (inputObject.classList.contains('force-time-format')) {
            // 方法【runInputFilter】,参照文章【Jquery实时验证,只能输入指定长度的数字】
            runInputFilter(inputObject, '', function(value) {
                if (/^\d*\:?\d*$/.test(value)) {
                    switch (value.length) {
                        case 0:
                            return true;
                        case 1:
                            return /^[0|1|2]$/.test(value);
                        case 2:
                            return /^([01]?[0-9]|2[0-3])$/.test(value);
                        case 3:
                            return /^([01]?\d|2[0-3])[:0-5]$/.test(value);
                        case 4:
                            if (value.contains(':')) {
                                return /^([01]?\d|2[0-3]):[0-5]$/.test(value);
                            } else {
                                return /^([01]?\d|2[0-3])[0-5]\d{1}$/.test(value);
                            }
                        case 5:
                            if (value.contains(':')) {
                                return /^([01]?\d|2[0-3]):[0-5]\d{1}$/.test(value);
                            } else {
                                return false;
                            }
                        default:
                            return false;
                    }
                }
                return false;
            });
            //格式化时刻,
            postLostFocus(inputObject, function(inputObject) {
                if (inputObject.value.length > 0 && inputObject.value.contains(':')) {
                   //未输满时,包含时刻分隔符【:】的场合,末尾补0凑成合法时刻。
                    inputObject.value = inputObject.value.padEnd(5, 0);
                }
                if (inputObject.value.length > 0 && !inputObject.value.contains(':')) {
                   //未输满时,不包含时刻分隔符【:】的场合,末尾补0凑成合法时刻。
                    inputObject.value = inputObject.value.padEnd(4, 0);
                }
                if (inputObject.value.length == 4 && !inputObject.value.contains(':')) {
                    inputObject.value = inputObject.value.replaceAll(/^(\d{2})(\d{2})$/ig, function($0, $1, $2) {
                        return $1 + ":" + $2;
                    });
                }
                else if (!/^([01]?[0-9]|2[0-3]):([0-5][0-9])$/.test(inputObject.value)) {
                    inputObject.value = '';
                }
            });
        }
    });
}

Tags:

最近发表
标签列表