Question

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

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，它可以在演示中使用，但您需要在页面中使用。

DEMO

Javascript嵌套事件

1 个答案: