1. 程式人生 > >如何做easyUI的自定義Validatebox 驗證框

如何做easyUI的自定義Validatebox 驗證框

如何實現和作用 通過 $.fn.validatebox.defaults 重寫預設的 defaults。 驗證框(validatebox)是為了驗證表單輸入欄位而設計的。如果使用者輸入無效的值,它將改變背景顏色,顯示警告圖示和提示訊息。驗證框(validatebox)可與表單(form)外掛整合,防止提交無效的欄位。 用法: 1.頁面直接實現

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

2.js實現

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

自定義validatebox

$.extend($.fn.validatebox.defaults.rules,{
		maxLength:{
			validator:function(value,param){
				return value.length<=param[0];
			},
			message:'輸入的長度不能超過{0}個字元!'
		},
		lsURL:{
			validator:function(str_url){
				var str=/^[a-zA-Z0-9_\/\-.=#?%:]{1,}$/;
				var re=new RegExp(str);
				if(str_url.match(re))
					return true;
			},
			message:'輸入URL格式不正確!'
		},
		isJSON:{
			validator:function(str){
				if(typeof str=='string'){
					try {
						var obj=JSON.parse(str);
						if(typeof obj=='object'&& obj){
							return true;
						}
					} catch (e) {
						message:'輸入內容不是json格式!'
					}
				}
			},
			message:'輸入內容不是json格式!'
		}
	})

常用的正則表示式驗證 1.只允許漢字、英文字母或數字

 chsEngNum:{
		 validator: function (value, param) {
           return /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$/.test(value);
       },
       message: '只允許漢字、英文字母或數字'
	  }

2.只允許漢字、英文字母或數字和(在開頭或者結尾處的)書名號

 bookName:{
		 validator: function (value, param) {
	            return /^(《|<)?([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*(》|>)?$/.test(value);
	        },
	        message: '只允許漢字、英文字母或數字和(在開頭或者結尾處的)書名號'
	  }

3.只允許漢字、英文字母、數字以及IP或MAC地址

 ipMacChsEngNum:{
		   validator: function (value, param) {
				 var isChsEngNum = /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$/.test(value);
				 var isMac = /^([0-9a-fA-F][0-9a-fA-F]:){5}([0-9a-fA-F][0-9a-fA-F])$/.test(value);
				 var isIp4 = /^(((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))$/.test(value);
				 return isChsEngNum || isMac || isIp4; 
				 
	        },
	        message: '只允許漢字、英文字母、數字以及IP或MAC地址'
	  }

4.驗證標準的MAC地址格式

 macAddress:{
		   validator: function (value, param) {
				 var isMac = /^([0-9a-fA-F][0-9a-fA-F](:|-)){5}([0-9a-fA-F][0-9a-fA-F])$/.test(value);
				 return isMac; 
				 
	        },
	        message: '不是標準的MAC地址格式'
	  }

5.IP地址

 ipv4:{
		   validator: function (value, param) {
				 var isIp4 = /^(((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))$/.test(value);
				 return isIp4; 
				 
	        },
	        message: '只允許IP地址'
	  }

6.行動電話

 mobilephone:{//行動電話
		  validator: function (value, param) {
				 var isMobilephone = /^((\+|00)86)?1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(value);
				 return isMobilephone; 
				 
	        },
	        message: '不是標準的電話號碼'
	  }

7.只能包含以下字元:數字,字母,漢字,下劃線,短橫線,英文括號,英文句號

specialCharFilter:{
			validator:function(value){
				var reg=/^[0-9a-zA-Z_\-\u4e00-\u9fa5\(\)\.\,]*$/;
				return reg.test(value);
			},
			message:"只能包含以下字元:數字,字母,漢字,下劃線,短橫線,英文括號,英文句號"
	  }

8.包含特殊的敏感字元

 sensitiveWordsFilter:{
			validator:function(value){
				var reg=/^.*(alert|alert\(.*\)|script|null).*$/;
				return reg.test(value)==false;
			},
			message:"包含特殊的敏感字元"
	  }

9.只允許漢字、英文字母或數字

 text:{
			 validator: function (value, param) {
		            return /^.+$/.test(value);
		        },
		        message: '只允許漢字、英文字母或數字'
	  }

10.最多輸入多少位

 maxLength:{
		  	 validator: function (value,param) { 
		  		 if(param == null || param == ""){
		  			 return true;
		  		 }
		  		 	return  value.length <= param[1];
		  		 },
		       message: "最多輸入{1}位"
	  }

11.該輸入項為必選項

needSelectOne:{
		  validator: function (value,param) { 
		  		 if(param == null || param == ""){
		  			 return true;
		  		 }
		  		 if(value){
		  			 return true;
		  		 }else{
		  			 return false;
		  		 }
		   },
		   message: "該輸入項為必選項"
	  }