javascript - JavaScript嵌套事件

我想参加一个令人沮丧的活动。通过嵌套事件，我的意思是这样的：

HTML：

<input type="text" onFocus='validStartDate()' name="start_date" id="startDate" />

Javascript：

function checkCorrectStart()
{
    document.getElementById("startDate").className = "focus";
    document.getElementById("startDate").onChange = function(){
        validStartDate();
    };
}

function validStartDate()
{
   re = /^\d{4}\-\d{2}\-\d{2}$/;
   var aux = document.getElementById("startDate").value;
   var valid = false;

   if (aux.match(re))
   {
       document.getElementById("startDate").className = "correct";
       valid = true;
   }
   else
   {
       document.getElementById("startDate").className = "wrong";
   }
   return valid;
}

这个想法是，当用户专注于输入框时，它将在输入周围产生一个黄色阴影，然后当用户更改该输入框的内容时，它将验证其是否正确，并在显示绿色阴影时显示正确或红色阴影如果不正确，则阴影。

关于如何执行此操作的任何想法或任何其他建议，将不胜感激。

最佳答案

如果您不想使用jQuery（使用纯JavaScript），则可以尝试使用

window.onload=function(){
    var el=document.getElementById("startDate");
    el.onfocus=function(){
        var currentClass=el.parentNode.className;
        if(currentClass!='correct') el.parentNode.className = "wrong";
    }
    el.onchange = validStartDate;
    el.onkeyup = validStartDate;
}

function validStartDate()
{
   var el=document.getElementById("startDate");
   var re = /^\d{4}\-\d{2}\-\d{2}$/;
   var aux = el.value;
   var valid = false;

   if (aux.match(re))
   {
       el.parentNode.className = "correct";
       valid = true;
   }
   else
   {
       el.parentNode.className = "wrong";
       valid = false;
   }
   return valid;
}

我没有在此处包括css，它在演示中可用，但您需要在页面中使用。

DEMO。