Javascript嵌套事件

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。