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