验证表单中的数据

Validate data from form

本文关键字：数据 表单 验证      更新时间：2023-09-26

我正在尝试验证我的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 的输入字段不像我的正则表达式模式，它应该有一个红色边框颜色。但它不是红色或绿色。我的错在哪里？

页面上是否有运行 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')
}
相关文章：