天天看點

JQuery EasyUI validate 擴充

$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: '兩次輸入内容不一緻'
    },
	minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    },
	//手機号碼
	mobile: {
		validator: function(value, param){
			return /^0{0,1}1[3,8,5][0-9]{9}$/.test(value);
		},
		message: "手機号碼格式不正确"
	},
	//身份證
	IDCard: {
		validator: function(value, param){
			return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
		},
		message: "請輸入正确的身份證号碼"
	},
	//比較時間選擇器
	compareDate: {
		validator: function(value, param){
			return dateCompare($(param[0]).datebox("getValue"), value);
		},
		message: "結束日期不能小于開始日期"
	},
	// 驗證是否包含空格和非法字元
    unnormal: {
        validator: function (value) {
            return /^[a-zA-Z0-9]/i.test(value);

        },
        message: '輸入值不能為空和包含其他非法字元'
    },
    //過濾特殊字元
    filterSpecial:{
        validator: function(value, param){

            //過濾空格
            var flag = /\s/.test(value);
            //過濾特殊字元串
            var pattern  = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】’‘《》;:”“'。,、?]");
            var specialFlag = pattern.test(value);
                return !flag && !specialFlag;
        },
        message: "非法字元,請重新輸入"
    },
	checkNum: {
		validator: function(value, param) {
			return /^([0-9]+)$/.test(value);
		},
		message: '請輸入整數'
	},
	checkFloat: {
		validator: function(value, param) {
			return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value);
		},
		message: '請輸入合法數字'
	},
    length:{validator:function(value,param){
		var len=$.trim(value).length;
		return len>=param[0]&&len<=param[1];
	},
		message:"輸入内容長度必須介于{0}和{1}之間."
	},
    phone : {// 驗證電話号碼
        validator : function(value) {
            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
        },
        message : '格式不正确,請使用下面格式:020-88888888'
    },
    intOrFloat : {// 驗證整數或小數
        validator : function(value) {
            return /^\d+(\.\d+)?$/i.test(value);
        },
        message : '請輸入數字,并確定格式正确'
    },
    qq : {// 驗證QQ,從10000開始
        validator : function(value) {
            return /^[1-9]\d{5,9}$/i.test(value);
        },
        message : 'QQ号碼格式不正确'
    },
    age : {// 驗證年齡
        validator : function(value) {
            return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
        },
        message : '年齡必須是0到120之間的整數'
    },

    chinese : {// 驗證中文
        validator : function(value) {
            return /^[\Α-\¥]+$/i.test(value);
        },
        message : '請輸入中文'
    },
    english : {// 驗證英語
        validator : function(value) {
            return /^[A-Za-z]+$/i.test(value);
        },
        message : '請輸入英文'
    },
    username : {// 驗證使用者名
        validator : function(value) {
            return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
        },
        message : '使用者名不合法(字母開頭,允許6-16位元組,允許字母數字下劃線)'
    },
    faxno : {// 驗證傳真
        validator : function(value) {
//            return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);
            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
        },
        message : '傳真号碼不正确'
    },
    zip : {// 驗證郵政編碼
        validator : function(value) {
            return /^[1-9]\d{5}$/i.test(value);
        },
        message : '郵政編碼格式不正确'
    },
    ip : {// 驗證IP位址
        validator : function(value) {
            return /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/i.test(value);
        },
        message : 'IP位址格式不正确'
    },
    name : {// 驗證姓名,可以是中文或英文
            validator : function(value) {
                return /^[\Α-\¥]+$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value);
            },
            message : '請輸入中文或英文的姓名'
    },
    date : {// 輸入合适的日期格式 yyyy-MM-dd或yyyy-M-d
        validator : function(value) {
         //格式yyyy-MM-dd或yyyy-M-d
            return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
        },
        message : '清輸入合适的日期格式'
    }
});

/*
 * 比較兩個日期的大小
 * 傳入的參數推薦是"yyyy-mm-dd"的格式,其他的日期格式也可以,但要保證一緻
 */
var dateCompare = function(date1, date2){
	if(date1 && date2){
		var a = new Date(date1);
		var b = new Date(date2);
		return a < b;
	}
}      
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Validate On Blur - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.validation.js"></script>
</head>
<body>
	<center>
	<h2 id="top">Validate</h2>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" title="常用" style="width:100%;max-width:400px;padding:30px 60px;">
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">長度範圍限制(3-10)</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'length[3,10]',validateOnCreate:false,validateOnBlur:true,err:err">
		</div>
		<div style="margin-bottom:20px">
			<label for="email" class="label-top">Email格式驗證</label>
			<input id="email" class="easyui-validatebox tb" data-options="required:true,validType:'email',validateOnCreate:false,validateOnBlur:true,tipPosition:'left'">
		</div>
		<div style="margin-bottom:20px">
			<label for="url" class="label-top">Url格式驗證</label>
			<input id="url" class="easyui-validatebox tb" data-options="required:true,validType:'url',validateOnCreate:false,validateOnBlur:true" tipPosition="right">
		</div>
		<div style="margin-bottom:20px">
			<label for="phone" class="label-top">密碼:</label>
			<input id="phone" class="easyui-passwordbox" prompt="Password" data-options="required:true,validateOnCreate:false,validateOnBlur:true" tipPosition="top">
		</div>
		<div style="margin-bottom:20px">
			<label for="phone" class="label-top">确認密碼:</label>
			<input id="rephone" class="easyui-passwordbox" prompt="RePassword" data-options="required:true,validateOnCreate:false,validateOnBlur:true" validType="equals['#phone']" tipPosition="bottom">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">限制最小長度5個字元:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validateOnCreate:false,validateOnBlur:true" validType='minLength[5]'>
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">手機号碼:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'mobile',validateOnCreate:false,validateOnBlur:true,err:err">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">身份證号:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'IDCard',validateOnCreate:false,validateOnBlur:true,err:err">
		</div>
	</div>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" title="數字" style="width:100%;max-width:400px;padding:30px 60px;">
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">輸入整數:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'checkNum',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">合法數字:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'checkFloat',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證電話号碼:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'phone',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證整數或小數 :</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'intOrFloat',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證QQ,從10000開始:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'qq',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證年齡:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'age',validateOnCreate:false,validateOnBlur:true">
		</div>
	</div>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" title="字元串" style="width:100%;max-width:400px;padding:30px 60px;">
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">輸入内容長度必須介于{0}和{1}之間:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'length[2,4]',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證是否包含空格和非法字元:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'unnormal',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">過濾特殊字元:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'filterSpecial',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證中文:</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'chinese',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證英語 :</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'english',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">使用者名不合法(字母開頭,允許6-16位元組,允許字母數字下劃線):</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'username',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證姓名,可以是中文或英文  :</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'name',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證傳真 3-4位數字'-'7-8位數字或7-8位數字(519-85125379或85125379):</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'faxno',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證郵政編碼(非0開頭6位數字):</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'zip',validateOnCreate:false,validateOnBlur:true">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">驗證IP位址 :</label>
			<input id="username" class="easyui-validatebox tb" data-options="required:true,validType:'ip',validateOnCreate:false,validateOnBlur:true">
		</div>
	</div>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" title="日期" style="width:100%;max-width:400px;padding:30px 60px;">
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">輸入合适的日期格式 yyyy-MM-dd :</label>
			<input id="username" style="width:100%;" class="easyui-datebox tb" data-options="required:true,validType:'date',validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser">
		</div>
		<div style="margin-bottom:20px">
			<label for="username"  class="label-top">結束日期不能小于開始日期:</label>
			<input id="date1" style="width:100%;" class="easyui-datebox tb " data-options="required:true,validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser">
		</div>
		<div style="margin-bottom:20px">
			<label for="username" class="label-top">結束日期不能小于開始日期:</label>
			<input id="date2" style="width:100%;" class="easyui-datebox tb " data-options="required:true,validateOnCreate:false,validateOnBlur:true,formatter:myformatter,parser:myparser" validType="compareDate['#date1']">
		</div>
	</div>
	<a href="#top"><img src="top.gif" style="position: fixed;right: 30px;bottom: 20px;" width="20" height="30"/></a>
	<style scoped="scoped">
		.tb{
			width:100%;
			margin:0;
			padding:5px 4px;
			border:1px solid #ccc;
			box-sizing:border-box;
		}
	</style>
	<!-- 設定錯誤提示顯示在下方 -->
	<script type="text/javascript">
		function err(target, message){
			var t = $(target);
			if (t.hasClass('textbox-text')){
				t = t.parent();
			}
			var m = t.next('.error-message');
			if (!m.length){
				m = $('<div class="error-message"></div>').insertAfter(t);
			}
			m.html(message);
		}
		function myformatter(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
		}
		function myparser(s){
			if (!s) return new Date();
			var ss = (s.split('-'));
			var y = parseInt(ss[0],10);
			var m = parseInt(ss[1],10);
			var d = parseInt(ss[2],10);
			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
				return new Date(y,m-1,d);
			} else {
				return new Date();
			}
		}
	</script>
</center>
</body>
</html>