如何使用JavaScript验证Telerik RadDatePicker的无效日期输入

使用两个分别对应起始日期（Date From）、**结束日期（Date To）**的RadDatePicker控件时，需要保证表单提交前用户至少提供一个有效日期值。
最初编写的基础校验代码如下：

function validateDates(sender, eventArgs) {

    var datePicker1 = $find("<%=RadDatePicker1.ClientID %>");
    var datePicker2 = $find("<%=RadDatePicker2.ClientID %>");


    if (datePicker1.get_selectedDate() == null && datePicker2.get_selectedDate() == null) 
    {
        alert("At least one date should be selected");
        eventArgs.set_cancel(true);
    }

       //alert(datePicker1.lastSetTextBoxValue.value);
       //return false;
}

这段基础逻辑可正常运行，但存在缺陷：用户在输入框键入不符合格式的无效字符串时，get_selecteddate()方法同样会返回null，会错误触发「至少选择一个日期」的提示，无法区分两个日期都未填写和输入了无效格式日期两种场景，需要补充格式校验逻辑，针对不同错误返回对应提示。
观察Telerik DatePicker渲染后的HTML结构，可发现两个特征：

<input id="ctl00_Contentplaceholder2_RadDatePicker1_dateInput" name="ctl00$Contentplaceholder2$RadDatePicker1$dateInput" class="riTextBox riError" type="text" style="">

<input id="ctl00_Contentplaceholder2_RadDatePicker1_dateInput_ClientState" name="ctl00_Contentplaceholder2_RadDatePicker1_dateInput_ClientState" type="hidden" autocomplete="off" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1980-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":"hhh"}'>

• 用户输入无效日期字符串时，对应输入框会被添加riError CSS类
• 对应隐藏域的lastSetTextBoxValue字段会存储用户输入的无效内容

优先使用RadDatePicker内置的状态接口做判断，不需要手动操作DOM、解析隐藏域JSON，兼容性和稳定性更好，修改后的完整校验代码如下：

function validateDates(sender, eventArgs) {
    var datePicker1 = $find("<%=RadDatePicker1.ClientID %>");
    var datePicker2 = $find("<%=RadDatePicker2.ClientID %>");
    
    // 获取两个日期控件的输入状态和值
    var picker1Input = datePicker1.get_dateInput();
    var picker2Input = datePicker2.get_dateInput();
    var isPicker1FormatInvalid = !picker1Input.isValid();
    var isPicker2FormatInvalid = !picker2Input.isValid();
    var selectedDate1 = datePicker1.get_selectedDate();
    var selectedDate2 = datePicker2.get_selectedDate();

    // 优先校验日期格式合法性
    if (isPicker1FormatInvalid || isPicker2FormatInvalid) {
        var errorTarget = isPicker1FormatInvalid ? "起始日期" : "结束日期";
        alert(errorTarget + "输入格式无效，请按要求的日期格式填写");
        eventArgs.set_cancel(true);
        return;
    }

    // 格式全部合法后，校验是否至少填写一个日期
    if (selectedDate1 == null && selectedDate2 == null) {
        alert("请至少选择起始日期或结束日期中的一个");
        eventArgs.set_cancel(true);
        return;
    }

    // 可选补充：两个日期都填写时，校验起始日期不晚于结束日期
    if (selectedDate1 != null && selectedDate2 != null && selectedDate1 > selectedDate2) {
        alert("起始日期不能晚于结束日期");
        eventArgs.set_cancel(true);
        return;
    }
}

逻辑说明 #

• 调用控件内置的get_dateInput().isValid()方法即可判断输入格式是否合法，该方法会自动识别riError类、隐藏域校验状态，不会因为Telerik版本升级、DOM结构调整导致校验失效
• 调整校验顺序，先处理格式错误，再处理空值场景，解决之前的误触发问题
• 如果需要获取用户输入的无效内容，直接调用get_dateInput().get_lastSetTextBoxValue()即可，无需手动解析隐藏域内容
• 最后补充的日期大小校验是表单常用逻辑，可根据实际业务需求决定是否保留

如果一定要基于观察到的DOM特征实现（不推荐，稳定性差），可使用如下判断逻辑替换内置方法调用：

// 手动判断输入格式错误的写法
function isPickerInputInvalid(picker) {
    var inputNode = picker.get_element().querySelector(".riTextBox");
    return inputNode.classList.contains("riError");
}

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