javascript - 如何使用javascript在弹出窗口中添加错误消息而不是警告框

Question

我需要使用 JavaScript 在弹出窗口内的文本框中验证日期格式。我需要显示类似于 的错误消息，而不是使用警告框document.getElementById("MainContent_ErrorMsg").innerHTML = "Please Enter valid date"。
有没有其他方法可以实现这种行为？我的 JavaScript 代码是：

    var startdate = document.getElementById("MainContent_uscEventParameters_txtEarliestStartDate");
    var enddate = document.getElementById("MainContent_uscEventParameters_txtLatestEndDate");
    var validformat=/^\d{4}\-\d{2}\-\d{2}$/;
    if (! (startdate.value.match(validformat)) && (enddate.value.match(validforamt)) )
    {
        alert("please enter valid date format");
        //document.getElementById("MainContent_ErrorMsg").innerHTML = "Please enter valid date";
    }

Answer 1

您可以使用简单纯 JavaScript 在元素旁边显示消息，而不是显示警报对话框：

function AddErrorLabel(element, msg) {
    var oLabel = document.createElement("span");
    oLabel.className = "error_msg";
    oLabel.innerHTML = msg;
    var parent = element.parentNode;
    if (element.nextSibling) {
        if (element.nextSibling.className !== "error_msg") {
            parent.insertBefore(oLabel, element.nextSibling);
        }
    }
    else {
        parent.appendChild(oLabel);
    }
}

用法：

if (! (startdate.value.match(validformat)) && (enddate.value.match(validforamt)) )
{
    AddErrorLabel(startdate, "please enter valid date format");
}

现场测试用例。（将文本框留空，然后单击提交）

像 jQuery 这样的库具有这样的功能并且更好，但对于简单的需求，这应该就足够了，它使用基本的 JavaScript，因此可以跨浏览器。