优化表单数据的JS校验

浏览数：21 / 时间：2015年06月09日

在平常的web开发中，我经常需要在客户端对表单的数据进行验证。比如，我们验证表单输入的内容不为空：

<form action="" 
method="post">
    名称:<input type="text" 
name="name"/>
    密码:<input type="text" 
name="password"/>
    <input type="submit" 
value="确认" 
onclick="return validate()"/>
</form>

1	`根据以往的经验,我们会写出如下的JS验证代码:`

<script type="text/javascript">
   function 
validate() {
      var 
form document.forms[0];
      if(form.name.value==null&&form.name.value="") {
     alert("名称不能为空");
     return 
false;
      }
      if(form.password.value==null&&form.password.value="") {
     alert("密码不能为空");
     return 
false;
      }
      return 
true;
   }
</script>

　　但是，现在我有一个业务追求：我要在页面取得的表单数据有很多，比如有十几二十项数据吧，那么我们要在JS代码中重复的写一部分代码，这样就将页面的代码拉得很长，以至于代码很不优雅。这里，我们用另一种面向对象的思维来看待这个问题。

　　首先，我们观察：验证的代码只有两个地方在改变，form的域和alert弹出的内容，所以我们这里就将其抽象出来：

function FormFiled(filename,desc) {
    this.name = name;
    this.desc = desc;
}

　　然后我在用组装字符串的方法来验证：

function 
validate() {
    var 
list = new 
Array(
        new 
FormFiled(“name”，“名称”),
        new 
FormFiled(“password”，“密码”),
    )
    for(var 
i=0;i<list.length;i++) {
        //这里组装一个字符串，相当于value = form.name.value
        var 
value = eval("form."+list[i].name+".value");
        if(value==null 
|| value="") {
            alert(list[i].desc+"不能为空");
            return 
false;
        }
    }
    return 
true;
}