在建造者模式中动态创建表单时，用户的输入是任意的，显然这是不允许的，我们需要过滤掉用户不合理的输入并加以提示，过滤器模式允许开发人员通过不同的标准过滤一组对象，并通过逻辑运算将他们连接起来。

实例中根据表单的要求，设计输入为空过滤器，邮箱格式过滤器，长度过滤器，并根据用户的输入给出结果，其类图结构如下：

代码实现：

varFilter=Class.extend({controls:[],ctor:function(_controls=[]){this.controls=_controls;},addControl:function(_control){this.controls.push(_control);},filter:function(){return[];}});varEmailFilter=Filter.extend({filter:function(){varmyreg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;for(variinthis.controls){vartxt=document.getElementById(this.controls[i].id).value;if(!myreg.test(txt)){console.log(this.controls[i].label+"不符合邮件格式");}}}});varLengthFilter=Filter.extend({filter:function(){for(variinthis.controls){vartxt=document.getElementById(this.controls[i].id).value;if(txt.length<6){console.log(this.controls[i].label+"长度不能小于6");}}}});varEmptyFilter=Filter.extend({filter:function(){for(variinthis.controls){vartxt=document.getElementById(this.controls[i].id).value;if(txt==""){console.log(this.controls[i].label+"不能为空");}}}});<body><formid="form1"action="#"method="post"></form></body><script>varempty_filter,email_filter,length_filter;(function(){varname=newInput("邮箱","username","username","text");varpassword=newInput("密码","password","password","password");varsubmit=newButton("提交","sub","sub",submitForm);varform=newForm("form1",[]);form.addControl(name).addControl(password).addControl(submit).build();empty_filter=newEmptyFilter();length_filter=newLengthFilter();email_filter=newEmailFilter();empty_filter.addControl(name);empty_filter.addControl(password);email_filter.addControl(name);length_filter.addControl(password);})();functionsubmitForm(){empty_filter.filter();email_filter.filter();length_filter.filter();}</script>


附件：http://down.51cto.com/data/2368476