jquery easy ui 验证框架

引入参考最下面API

missingMessage：未填写时显示的信息
validType：验证类型见下示例
invalidMessage：无效的数据类型时显示的信息
required="true" 必填项
class="easyui-validatebox" 文本验证
class="easyui-numberbox" 数字验证

html


   邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />
    网址验证：<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />
    长度验证：<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />
    手机验证：<input type="text" validtype="mobile"  /><br />
    邮编验证：<input type="text" validtype="zipcode" /><br />
    账号验证：<input type="text" validtype="account[8,20]" /><br />
    汉子验证：<input type="text" validtype="CHS" /><br />
    远程验证：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>


// easyui通用验证规则
	$.extend($.fn.validatebox.defaults.rules, {
		date: {
			validator: function (value) {
				var reg = /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/;
				return reg.test(value);
			},
			message: '日期格式不正确 YYYY-MM-DD'
		},
		integer: {
			validator: function (value) {
				var reg = /^[\-\+]?\d+$/;
				return reg.test(value);
			},
			message: '无效的整数'
		},
		number: {
			validator: function (value) {
				var reg = /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/;
				return reg.test(value);
			},
			message: '无效的数值'
		},
		mobile: {
			validator: function (value) {
				alert(123)
				var reg = /^1[3|4|5|8|9]\d{9}$/;
				return reg.test(value);
			},
			message: '输入手机号码格式不准确.'
		}

	})


$.extend($.fn.validatebox.defaults.rules, {
	ajaxLookName: {//ajax验证
		validator: function (value) {
			$.post((baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename"),{houseName:value},function(rec){
				if(rec.code == "0"){
					if(rec.data.result){
						$.fn.validatebox.defaults.rules.ajaxLookName.message='看房团名称已被其它用户定义过，请修改！';
						return false;
					}else{
						return true;
					}
				}else{
					alert(rec.desc);
				}
			},"json").error(function(){
				alert("请求失败！");
			});
		},
		message: ''
	}
})

验证

$($($addDiv).find("#addForm")).form('validate')//返回 true false

至于要不要加 $('input[type=text]').validatebox(); 使所有验证生效，api上说设置了样式可以不必加，但是实际中和bootstarp集成中不能调用，一调用就出现莫名其妙的错误

最后说一下 easyui、不支持组合校验渣渣我也懒得自定义多种规则了最多只能支持一个必填和一个自定义验证

以上是正常的使用

与bootstarp使用的时候又出现各种奇葩问题

1.easyui js 要引两次

2.自定义的验证规则要写在第二次引easy ui 前面否则不生效

3.自定义的ajax的规则不生效了,需要自己自定义，采用隐藏框吧

4.$('input[type=text]').validatebox(); 使所有验证生效，api上说设置了样式可以不必加，但是实际中和bootstarp集成中不能调用，一调用就出现莫名其妙的错误

第二种bug 代码


<link rel="stylesheet" href="${baseURL}/js/3rd-plug/easy-ui-1.4.2/themes/black/easyui.css" type="text/css"/>
<link rel="stylesheet" href="${baseURL}/js/3rd-plug/easy-ui-1.4.2/themes/icon.css" type="text/css"/>
<script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/locale/common_validation-zh_CN.js"></script>
<script>
	$.extend($.fn.validatebox.defaults.rules, {
		datecompare: {
			validator: function (value) {
				if($('#regEndtime').val()&&$('#regBegintime').val()>$('#regEndtime').val()){
					return false;
				}
				return true;
			},
			message: '报名开始时间不能大于报名截止时间，请修改！'
		},
		lookhousedatecompare: {
			validator: function (value) {
				if($('#regEndtime').val()&&$('#lookhousetime').val()<$('#regEndtime').val()){
					return false;
				}
				return true;
			},
			message: '看房时间必须大于报名截止时间，请修改！'
		},
		numcompare: {
			validator: function (value) {
				if($('#maxNum').val()&&$('#minNum').val()>$('#maxNum').val()){
					return false;
				}
				return true;
			},
			message: '成团最低人数必须不能大于成团最高人数，请修改！'
		}
	})

</script>
<script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/jquery.easyui.min.js"></script>

如上图自定义验证规则要引在第二次前面

第三种bug 代码


$("#lookhousegroupName").on("blur",function(){
			if($("#lookhousegroupName").hasClass("validatebox-invalid")){
				return;
			}
			$.post((baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename"),{houseName:($(this).val())},function(rec){
				if(rec.code == "0"){
					if(rec.data.result){
						$("#lookhousegroupNameajax").val("0");
						return false;
					}else{
						$("#lookhousegroupNameajax").val("1");
					}
				}else{
					alert(rec.desc);
				}
			},"json").error(function(){
				alert("请求失败！");
			});

		})

如上 $("#lookhousegroupName").hasClass("validatebox-invalid") 加上这句，是要等元素验证通过后再调用ajax,防止不必要的多余验证

最后贴上 api

通过 $.fn.validatebox.defaults 重写默认的 defaults。

验证框（validatebox）是为了验证表单输入字段而设计的。如果用户输入无效的值，它将改变背景颜色，显示警告图标和提示消息。验证框（validatebox）可与表单（form）插件集成，防止提交无效的字段。

jquery easy ui 验证框架

依赖

tooltip

用法

从标记创建验证框（validatebox）。

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

使用 javascript 创建验证框（validatebox）。

<input id="vv">


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

检查密码和重新输入密码是相同的。


// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: 'Field do not match.'
}
});


<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
required="required" validType="equals['#pwd']">

验证规则

验证规则是通过使用 required 和 validType 属性来定义的，这里是已经实施的规则：

email：匹配 email 正则表达式规则。
url：匹配 URL 正则表达式规则。
length[0,100]：允许从 x 到 y 个字符。
remote['http://.../action.do','paramName']：发送 ajax 请求来验证值，成功时返回 'true' 。

要自定义验证规则，重写 $.fn.validatebox.defaults.rules，来定义一个验证函数和无效的信息。例如，定义一个 minLength 验证类型：


$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});

现在您可以使用这个 minLength 验证类型来定义一个至少输入5个字符的输入框：

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

属性

名称	类型	描述	默认值
required	boolean	定义是否字段应被输入。	false
validType	string,array	定义字段的验证类型，比如 email、url，等等。可能的值： 1、验证类型字符串，应用单个验证规则。 2、验证类型数组，应用多个验证规则。单个字段上的多个验证规则自版本 1.3.2 起可用。代码实例： <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] ">	null
delay	number	延迟验证最后的输入值。该属性自版本 1.3.2 起可用。	200
missingMessage	string	当文本框为空时出现的提示文本。	该字段是必需的。
invalidMessage	string	当文本框的内容无效时出现的提示文本。	null
tipPosition	string	定义当文本框的内容无效时提示消息的位置。可能的值：'left'、'right'。该属性自版本 1.3.2 起可用。	right
deltaX	number	在 X 方向的提示偏移。该属性自版本 1.3.3 起可用。	0
novalidate	boolean	当设置为 true 时，则禁用验证。该属性自版本 1.3.4 起可用。	false

方法

名称	参数	描述
destroy	none	移除并销毁该组件。
validate	none	进行验证以判定文本框的内容是否有效。
isValid	none	调用 validate 方法并且返回验证结果，true 或者 false。
enableValidation	none	启用验证。该方法自版本 1.3.4 起可用。
disableValidation	none	禁用验证。该方法自版本 1.3.4 起可用。

秒客网

jquery easy ui 验证框架

依赖

用法

验证规则

属性

方法

相关文章