如何做easyUI的自定义Validatebox 验证框

4 篇文章 0 订阅
2 篇文章 0 订阅

如何实现和作用
通过 $.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: "该输入项为必选项"
	  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值