javascript - Javascript 嵌套事件

Question

我想做一个嵌套事件。通过嵌套事件，我的意思是这样的：

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;
}

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

关于如何做到这一点的任何想法或任何其他建议，将不胜感激。

Answer 1

如果您不想使用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这里，它在演示中可用，但您需要在您的页面中使用。

演示。