正確的輸入——過濾器模式

發(fā)布時(shí)間：2020-08-05 20:32:28 來源：網(wǎng)絡(luò) 閱讀：895 作者：janwool 欄目：開發(fā)技術(shù)

在建造者模式中動態(tài)創(chuàng)建表單時(shí)，用戶的輸入是任意的，顯然這是不允許的，我們需要過濾掉用戶不合理的輸入并加以提示，過濾器模式允許開發(fā)人員通過不同的標(biāo)準(zhǔn)過濾一組對象，并通過邏輯運(yùn)算將他們連接起來。

實(shí)例中根據(jù)表單的要求，設(shè)計(jì)輸入為空過濾器，郵箱格式過濾器，長度過濾器，并根據(jù)用戶的輸入給出結(jié)果，其類圖結(jié)構(gòu)如下：

正確的輸入——過濾器模式

代碼實(shí)現(xiàn)：

var Filter = Class.extend({
	controls:[],
	ctor:function(_controls = []){
		this.controls = _controls;
	},
	addControl:function(_control){
		this.controls.push(_control);
	},
	filter:function(){
		return [];
	}
});

var EmailFilter = Filter.extend({
	filter:function(){
		var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
		for(var i in this.controls){
			var txt = document.getElementById(this.controls[i].id).value;
			if(!myreg.test(txt))
			{
				console.log(this.controls[i].label + "不符合郵件格式");
			}
		}
	}
});

var LengthFilter = Filter.extend({
	filter:function(){
		for(var i in this.controls){
			var txt = document.getElementById(this.controls[i].id).value;
			if(txt.length < 6){
				console.log(this.controls[i].label + "長度不能小于6");
			}
		}
	}
});

var EmptyFilter = Filter.extend({
	filter:function(){
		for(var i in this.controls){
			var txt = document.getElementById(this.controls[i].id).value;
			if(txt == ""){
				console.log(this.controls[i].label + "不能為空");
			}
		}
	}
});
    <body>
        <form id = "form1" action = "#" method = "post">
        </form>
	
	</body>
	<script>
		var empty_filter,email_filter,length_filter;
		(function(){
			var name = new Input("郵箱","username","username","text");
			var password = new Input("密碼","password","password","password");
			var submit = new Button("提交","sub","sub",submitForm);
			var form  = new Form("form1",[]);
			form.addControl(name).addControl(password).addControl(submit).build();
			empty_filter = new EmptyFilter();
			length_filter = new LengthFilter();
			email_filter = new EmailFilter();
			empty_filter.addControl(name);
			empty_filter.addControl(password);
			email_filter.addControl(name);
			length_filter.addControl(password);
		
		})();
		function submitForm(){
			empty_filter.filter();
			email_filter.filter();
			length_filter.filter();
		}
	</script>

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

向AI問一下細(xì)節(jié)

正確的輸入——過濾器模式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽