Javascript嵌套事件

Javascript nested Events

本文关键字：事件 嵌套 Javascript      更新时间：2023-09-26

我想制作一个嵌套事件。嵌套事件的意思是：

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

演示。

相关文章：