rapid validation 自定義驗證

學習了下 rapid-validation,發現這個驗證框架是個好東西,也支持tooltip,一些基本的表單驗證都有了.

 

 但如果遇到複雜的業務規則就必須自定義驗證來解決,rapid-validation有寫自定義驗證的地方,但自己寫的一般性驗證效果都是alert()彈出式,不是tooltip那種效果,爲了達到統一融合,就實現了所謂的自定義驗證。

 

<script>
	var globle_flag=0;//全局變量,用來標記是否已經驗證完自定義的。
	new Validation(document.forms[0],{onSubmit:true,onFormValidate : function(result,form) {
		var finalResult = result;
		//在這裏添加自定義驗證
		if(globle_flag == 1){//如果已經驗證完自定義的,且rapid-Validation也已經驗證完,就提交。
			return disableSubmit(finalResult,'submitButton');
		}
	}});
	
	//點擊“提交”時調用此方法
	function sub(){
		globle_flag=0;
		var elm = $prototype("username");
		var uname=elm.value;
		if(uname != "aaa"){
			showErorMsg("username","名字不是aaa,請重新輸入!");
			return false;
		}else{
			globle_flag=1;
			hideErrMsg("username");
		}
		
	}
	//將錯誤信息顯示到tooltip
	function showErorMsg(elm,errorMsg) {
		var elm = $prototype(elm);
		if(typeof Tooltip != 'undefined') {
			if (!elm.tooltip) {
				elm.tooltip = new Tooltip(elm, {backgroundColor:"#FC9", borderColor:"#C96", textColor:"#000", textShadowColor:"#FFF"});
			}
			elm.tooltip.content = errorMsg;
		}
		elm.style.border="3px solid #FF0000";
	}
	//隱藏tooltip	
	function hideErrMsg(elm) {
		var elm = $prototype(elm);
		if(typeof Tooltip != 'undefined') {
			if (elm.tooltip) {
				elm.tooltip.stop();
				elm.tooltip = false;
			}
		}
		elm.style.border="1px solid #00CC00";
		elm.style.color="#000";
	}
	
</script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章