在平常的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;} |
用以上方法来验证的话，增加表单域的验证的时候，只需要在list中添加一些对象就可以了，这样就可以大大减少代码量，页面代码也更优雅。
原文：http://www.cnblogs.com/ejllen/p/3683454.html