javascript - 在 javascript 中验证表单的更好方法

Question

我有一个带有按钮的 HTML 表单，单击该按钮时，它将检查字段是否为空。这是我的代码的一部分，它进行验证（它有效）：

var errorMessage ="";
if (document.getElementById('username').value == "")
    {
    errorMessage += "Please enter a username \n";
    document.getElementById('username').style.borderColor = "red";
    }
if (document.getElementById('fname').value == "")
    {
    errorMessage += "Please enter a first name \n";
    document.getElementById('fname').style.borderColor = "red";

}
if (document.getElementById('lname').value == "")
    {
    errorMessage += "Please enter a last name \n";
    document.getElementById('lname').style.borderColor = "red";

    }
if (errorMessage != "")
    {
alert(errorMessage);
}

我的问题是因为我有更多需要验证的字段，我想知道是否有更好的方法来做到这一点，而不是有这么多的 if 语句（我试图尽可能少的代码）。我正在考虑使用 switch case 语句，但这会起作用吗？有什么建议么？

score 2 · Accepted Answer

您可以使用包含字段数据的表，然后对其进行迭代。

var fields = [[document.getElementById("username"),"Please Enter Your Username"],
              [document.getElementById("fname"),   "Please Enter Your First Name"],
              [document.getElementById("lname"),   "Please Enter Your Last Name"]];

function Check()
{
    var error = [];

    for (var i in fields)
    {
        if (fields[i][0].value == "")
        {
            error.push(fields[i][1]);
            fields[i][0].style.borderColor = "red";
        }
    }

    if (error.length)
        window.alert(error.join(",\n"));

    return !error.length;
}

注意：可能你想确保该值不是空的，所以我建议你使用类似的东西：fields[i][0].value.replace(/\s/g, "") == ""代替。

score 1 · Accepted Answer

我会采用这种方式，使用 data-* 属性来存储错误消息：

现场演示

<form id="myForm" name="myForm">
   <input type="text" name="username" id="username" data-err="Please enter a username" />
    <input type="text" name="fname" id="fname" data-err="Please enter a first name" />
    <input type="text" name="lname" id="lname" data-err="Please enter a last name"/>

    <input type="submit" />
</form>

function formValidator(){

  var inputs = this.getElementsByTagName('input');
  var allErrors = '';

  for(var i=0; i<inputs.length; i++) {
      var el = inputs[i];
      var data = el.dataset.err;
      if(data && el.value.trim() === ''){
          allErrors += data +'\n';
      }    
  }
  if(allErrors){
      alert(allErrors);
      return false;
  }else{
      alert('All fine. Submit!'); 
  }

}


document.myForm.onsubmit = formValidator;

score 0 · Accepted Answer

由于其他所有答案要么建议编写您自己的验证代码，要么使用一些大而重的框架，如 Angular，我建议使用小型、专门的库进行验证，如Parsley.js（尽管这取决于你如何定义“小" - Parsley 提供 jQuery/Zepto 依赖版本或独立版本，大小约为 42kB）。

使用 Parsley，您可以编写很少的代码来验证表单。只需加载此库，然后使用自定义 HTML 属性中定义的规则，例如data-type="email".

这是他们网页中的一个示例（我删除了您问题中不重要的所有部分。这是一个完整的示例，供您参考）：

<form id="demo-form" data-validate="parsley">
    <input 
         type="text" 
         name="email" 
         data-trigger="change"         <!-- parsley's attributes: data-... -->
         data-required="true" 
         data-type="email" />          <!-- E-mail rule -->

    <input 
         type="text" 
         name="website" 
         data-trigger="change" 
         data-type="url" />            <!-- URL rule -->

    <textarea 
         name="message" 
         data-trigger="keyup" 
         data-rangelength="[20,200]">
    </textarea>
</form>

当然，还有其他库可以做同样的事情，比如validate.js，但我更喜欢 Parsley.js 使用data-属性的方法——这是一个非常清晰的关注点分离和“扩展”HTML 的好例子。