Question

我正在尝试验证html表单的每个元素。

这是我的代码：

function check()
{
    var re1 = new RegExp("^[a-zA-z]{3,20}$"); //Prename
    var re2 = new RegExp("^[a-z0-9_-]{3,15}$"); //Username
    var index;
    var element;
    var data = ["prename", "lastname", "username", "email", "password", "password1"];

    for (index = 0; index < data.length; ++index)
    {
        element = data[i];
        checkinput(element);
    }

}   

function checkinput(element)
{
    if (element == "prename")
    {
        if (document.register.element.value.match(re1))
        {
            document.getElementById(element).style.borderColor="lightgreen";
        }
        else
        {
            document.getElementById(element).style.borderColor="red";
        }
    }
    else if (element == "lastname")
    {
        if (document.register.element.value.match(re1))
        {
            document.getElementById(element).style.borderColor="lightgreen";
        }
        else
        {
            document.getElementById(element).style.borderColor="red";
        }
    }
    else if (element == "username")
    {
        if (document.register.element.value.match(re2))
        {
            document.getElementById(element).style.borderColor="lightgreen";
        }
        else
        {
            document.getElementById(element).style.borderColor="red";
        }
    }


}

例如，如果标识为#prename的输入字段与我的正则表达式模式不同，则它应具有红色边框颜色。但它不是红色或绿色。我的错在哪里？

Answer 1

您是否在运行check（）的页面上有一个事件监听器？您可以考虑将document.addEventListener('keypress',check)添加到js文件中，以确保检查实际上是在您希望的位置执行。

让听众只关注你关心的元素会更有意义;也就是说，您将对要检查的特定字段运行检查。这将导致代码符合以下行：

regExChecker = {
  prename: new RegExp("^[a-zA-z]{3,20}$"),
  lastname: new RegExp("^[a-zA-z]{3,20}$"),
  username: new RegExp("^[a-z0-9_-]{3,15}$")
}

function checkElement(evt) {
  var el = evt.target
  if (el.value.match(regExChecker[el.id])){
    el.style.borderColor = "lightgreen";
  }
  else {
    el.style.borderColor = "red";
  }
}

function bindListeners(){
  for (var i = 0; i < arguments.length; i++) {
    document.getElementById(arguments[i]).addEventListener('keypress',checkElement)
  }
}

window.onload = function(){
  bindListeners('prename', 'lastname', 'username')
}

验证表单中的数据

1 个答案: