验证表单中的数据

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";
        }
    }


}

例如，如果 id #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')
}