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语句，但这会有用吗？有什么建议吗？

Answer 1

您可以使用包含字段数据的表，然后迭代它。

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, "") == ""的内容。

Answer 2

如果您使用html5尝试在html元素上添加必需属性。它是一个布尔属性。如果存在，它指定在提交表单之前必须填写输入字段。

类似于：<input type="text" name="usrname" required>

<强> Demo

Answer 3

我会这样做，使用data- *属性来存储错误消息：

Live demo

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

Answer 4

由于每个其他答案要么建议编写自己的验证代码，要么使用像Angular这样的大而重的框架，我建议使用小型专用库进行验证，例如Parsley.js（尽管它取决于如何你定义“小” - 欧洲船只以jQuery / Zepto depend和版本或独立权重约42kB）。

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

以下是他们网页上的一个示例（我在您的问题中删除了所有不重要的部分。Here is a full example，供您参考）：

<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，但我更喜欢使用data-属性的Parsley.js' - 这是一个非常明确的关注点分离和很好的例子“扩展”HTML。

Answer 5

如果你想使用普通的Javascript而没有任何客户端Javascript框架，或HTML5你不能这样做。

您可以按照@bios的建议查看HTML5，也可以使用以下框架：

validate.js

html5 libraries

这些可以简化您的验证要求并使代码更清晰。

如果你想要更复杂的东西，你可以选择完整的客户端MVC框架，例如：

AngularJS

Backbone.js

但如果您只想进行表单验证，那么这些太重了。

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

5 个答案: