ASP.NET MVC中基于jQuery实现DD-MM-YYYY日期格式验证方案

需求要求 #

• 仅允许短横线“-”作为分隔符，禁止输入点号“.”、斜杠“/”等其他特殊字符及字母；
• 日期有效性校验：日不超过31，月不超过12；日和月必须为两位数字（例如需输入09而非9），禁止输入三位数字；
• 无效日期（如32-09-2022）需触发错误提示；31-06-2022这类超出当月天数的日期需自动转换为01-07-2022；
• 验证错误提示信息为“日期格式应为DD-MM-YYYY”。

实现代码 #

HTML部分 #

<input type="text" class="form-control calendar datepicker" 
    style="width: 100% !important;" placeholder="选择日期" name="fixdate" id="fixdate" 
    onblur="GetContName('fixdate')" maxlength="10" 
    onkeyup="DateContValidateSetLoSto('fixdate')" 
    autocomplete="off" data-date-format="dd-mm-yyyy">

<span id="msgfixdate" style="display:none; color:red"></span>

JavaScript部分 #

// 输入框失焦时触发验证
function GetContName(controlName) {    
    DateContVali(controlName)
}

// 重置日期选择器
function ResetDatePicker(controllName) {
    $("#" + controllName).datepicker('setDate', null)
}

// 记录输入框内容到本地存储
function DateContValidateSetLoSto(controllName) {
    localStorage.setItem("Val", $("#" + controllName).val());
}

// 重置提示文本
function ResetSpanText(controllName) {
    if ($("#" + controllName).val() != "") {
        $("#msg" + controllName).hide();
    }
}

// 基础日期格式校验
function DateValidate(dateVal) {
    var resultDate = true;
    var DocDate = dateVal.split("-");
    var day = DocDate[0];
    var month = DocDate[1];
    var year = DocDate[2];
    
    // 校验日、月、年的格式规则
    if (day != undefined && (day > 31 || day.length != 2)) {
        resultDate = false;
    }
    if (month != undefined && (month > 12 || month.length != 2)) {
        resultDate = false;
    }
    if (year != undefined && (year.length != 4)) {
        resultDate = false;
    }

    // 检查是否包含斜杠分隔符
    var str2 = "/";
    if (dateVal.indexOf(str2) != -1) {
        resultDate = false;
    }
    return resultDate
}

// 完整日期验证逻辑
function DateContVali(controllName) {
    debugger;
    var inputVal = $("#" + controllName).val();
    if (inputVal != "") {
        if (!DateValidate(inputVal)) {
            $("#msg" + controllName).text('日期格式应为DD-MM-YYYY')
            $("#msg" + controllName).show();          
            ResetDatePicker(controllName);
            localStorage.removeItem('Val');
            return;
        }
        else {
            var storedVal = localStorage.getItem("Val");
            if (storedVal === null || storedVal === '') {
                $("#msg" + controllName).hide();
            }
            else {
                // 校验存储值的长度、日期范围和格式
                if (storedVal.length != 10) {
                    $("#" + controllName).val("");
                    $("#msg" + controllName).text('日期格式应为DD-MM-YYYY');
                    $("#msg" + controllName).show();
                } else if (storedVal.split("-")[0] > 31 || storedVal.split("-")[1] > 12) {
                    $("#" + controllName).val("");
                    $("#msg" + controllName).text('日期格式应为DD-MM-YYYY');
                    $("#msg" + controllName).show();
                }
                else if (!(storedVal.match(/^(0?[1-9]|[12][0-9]|3[01])[-](0?[1-9]|1[012])[-]\d{4}$/))) {
                    $("#" + controllName).val("");
                    $("#msg" + controllName).text('日期格式应为DD-MM-YYYY');
                    $("#msg" + controllName).show();
                }
                else {
                    $("#msg" + controllName).hide();
                }
                localStorage.removeItem('Val');               
            }
        }
    }
    else {
        $("#msg" + controllName).hide();
        var storedVal = localStorage.getItem("Val");
        if (storedVal === null || storedVal === '') {
            $("#msg" + controllName).hide();
        }
        else {
            if (storedVal.length != 10) {
                $("#" + controllName).val("");
                $("#msg" + controllName).text('日期格式应为DD-MM-YYYY');
                $("#msg" + controllName).show();
            } else if (storedVal.split("-")[0] > 31 || storedVal.split("-")[1] > 12) {
                $("#" + controllName).val("");
                $("#msg" + controllName).text('日期格式应为DD-MM-YYYY');
                $("#msg" + controllName).show();
            }
            else if (!(storedVal.match(/^(0?[1-9]|[12][0-9]|3[01])[-](0?[1-9]|1[012])[-]\d{4}$/))) {
                $("#" + controllName).val("");
                $("#msg" + controllName).text('日期格式应为DD-MM-YYYY');
                $("#msg" + controllName).show();
            }
            else {
                $("#msg" + controllName).hide();
            }
            localStorage.removeItem('Val');
        }
    }
}

内容的提问来源于stack exchange，提问作者Gagan Thakral