在平常的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中添加一些对象就可以了，这样就可以大大减少代码量，页面代码也更优雅。