时间戳

首页 > 解决方案 > 我想验证用户的伪在他写作时是否良好

javascript - 我想验证用户的伪在他写作时是否良好

问题描述

我正在创建一个小型社区博客，我希望每个新用户都有一个以大写字母开头的昵称，后跟至少两个小写字母，后跟至少一个数字，我想先用 javascript 进行检查然后用 php。

对于 javascript 检查，我希望在输入字段（事件输入）时发生这种情况，如果昵称与规则不匹配，则输入字段的边框会像大多数网站一样变为红色。

为此，我有一个处理着色的函数，它接受两个参数，另一个检查输入的数据是否对应于它包含的正则表达式。后者也需要一个参数。但是我的代码不能像我希望的那样工作。请指导我。

function surligne(champ, erreur)
{
    if(erreur)
         champ.style.backgroundColor = "red";
    else
         champ.style.backgroundColor = "";
}


function verifPseudo(champ)
{
   var regex= /^[A-Z][a-z]{2,}[0-9]+/;

   if(!regex.test(champ.value))
   {
         surligne(champ, true);
         return false;
   }
   else
   {
         surligne(champ, false);
         return true;
   }
}

var pseudoElt=document.getElementById("pseudo");

pseudoElt.addEventListener("input", verifPseudo(this));

在另一个论坛上，有人告诉我问题来自我在 addEventListenener 中的函数

标签： javascript

解决方案

传入将不起作用，因为this不是输入字段，而是整个窗口、页面、文档，无论它被称为什么！verifPseudothis

你可以试试这个代码，在我改变之后

function surligne(champ, erreur)
{
     if(erreur)
          champ.style.backgroundColor = "red";
     else
         champ.style.backgroundColor = "";
}
function verifPseudo(champ)
{
     var regex= /^[A-Z][a-z]{2,}[0-9]+/;
     if(!regex.test(champ.target.value))        //passed target elements value
     {
          surligne(champ.srcElement, true);     //passed the source element to work on
          return false;
     }
     else
     {
          surligne(champ.srcElement, false);
          return true;
     }
}

var pseudoElt=document.getElementById("pseudo");

pseudoElt.addEventListener("input", e => {    //changed from verifPseudo(this)
     verifPseudo(e)
});

如果您不想要 ES6 代码，请改用此事件侦听器

pseudoElt.addEventListener("input", function(e){ 
     verifPseudo(e); 
});

推荐阅读