优化表单数据的JS校验

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

转载于:https://www.cnblogs.com/ejllen/p/3683454.html