Easyui validatebox的验证提示十分好用，可是在实际项目的运用中，经常会遇到需要服务器验证后并返回验证结果信息，比如验证用户名、手机号、邮箱是否已存在。于是就想着怎么拓展Easyui的验证策略，使其支持服务端验证。具体实现代码如下：
文件名称：jquery.easyui.extend.validate.js
/** * 功能:拓展easyui 自定义验证框规则 * 用法: 与easyui自带的验证框使用方法一致 */ $.extend($.fn.validatebox.defaults.rules,{ minLength:{// 判断最小长度 validator:function(value,param) { return value.length>=param[0]; }, message:\'请最少输入{0}个字符.\' }, 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\' }, mobile:{// 验证手机号码 validator:function(value) { return /^(11|12|13|14|15|16|17|18|19)\d{9}$/i.test(value); }, message:\'手机号码格式不正确,请使用如下格式:13118957545\' }, idcard:{// 验证身份证 validator:function(value) { return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value); }, message:\'身份证号码格式不正确\' }, intOrFloat:{// 验证整数或小数 validator:function(value) { return /^\d+(\.\d+)?$/i.test(value); }, message:\'请输入数字，并确保格式正确\' }, currency:{// 验证货币 validator:function(value) { return /^\d+(\.\d+)?$/i.test(value); }, message:\'货币格式不正确\' }, qq:{// 验证QQ,从10000开始 validator:function(value) { return /^[1-9]\d{4,9}$/i.test(value); }, message:\'QQ号码格式不正确\' }, integer:{// 验证整数 validator:function(value) { return /^[+]?[1-9]+\d*$/i.test(value); }, message:\'请输入大于0的整数\' }, number:{// 验证数字 validator:function(value) { return /^[+]?[0-9]+\d*$/i.test(value); }, message:\'请输入正整数\' }, chinese:{// 验证中文 validator:function(value) { return /^[\u0391-\uFFE5]+$/i.test(value); }, message:\'请输入中文\' }, english:{// 验证英语 validator:function(value) { return /^[A-Za-z]+$/i.test(value); }, message:\'请输入英文\' }, unnormal:{// 验证是否包含空格和非法字符 validator:function(value) { return /.+/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 /d+.d+.d+.d+/i.test(value); }, message:\'IP地址格式不正确\' }, name:{// 验证姓名，可以是中文或英文 validator:function(value) { return /^[\u0391-\uFFE5]+$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value); }, message:\'请输入姓名\' }, carNo:{ //验证车牌号码 validator:function(value){ return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value); }, message:\'车牌号码无效（例：粤J12350）\' }, carenergin:{ validator:function(value){ return /^[a-zA-Z0-9]{16}$/.test(value); }, message:\'发动机型号无效(例：FG6H012345654584)\' }, email:{ //验证邮箱 validator:function(value){ return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); }, message:\'请输入有效的电子邮件账号(例：abc@126.com)\' }, msn:{ //验证msn validator:function(value){ return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); }, message:\'请输入有效的msn账号(例：abc@hotnail(msn/live).com)\' }, same:{ //确认两次密码是否一致 validator:function(value,param){ if($("#"+param[0]).val() !=""&&value!=""){ return $("#"+param[0]).val() ==value; }else{ return true; } }, message:\'两次输入的密码不一致！\' }, // 验证编码是否重复【后端服务器验证返回】 productBasisVerify: { validator: function(value, param) { if (value != "") { var result = false; $.ajax({ type: \'POST\', url: ProductBase.urls[\'verifyData\'], data: {verify: param, value: value}, dataType: \'json\', async: false, // 关闭异步 success: function(rec) { if (rec.success){ result = true; } else { result = false; } } }); return result; } }, message: \'该编码已被使用，请换个试试！\' }, license:{//验证营业执照 validator:function(value){ return/^\d{15}$/.test(value); }, message:\'营业执照格式输入错误\' }, texture:{//验证组织机构代码 validator:function(value){ return/^[a-zA-Z0-9]\S(([0-9]){7}\S)?[a-zA-Z0-9]+$/.test(value); }, message:\'组织机构代码格式输入错误\' }, taxation_number:{//验证税务登记证 validator:function(value){ return/(^\d\S{14}|^\d\S{17})$/.test(value); }, message:\'税务登记证格式输入错误\' }, bank_account:{//验证银行卡号 validator:function(value){ return/^[0-9]*$/.test(value); }, message:\'银行卡号格式输入错误\' }, });
Easyui本身的验证机制是设置一个计时器，然后按照计时器触发验证规则进行验证，但是对应长的文本输入框，就会导致还未完全输入就已经验证了好几次了。有人说把Easyui的计时器修改短一点不就行了嘛，但是对于编码、手机号码这些短的字段要进行校验呢？校验效果又不理想了，所以最终的解决办法如下：
<script type="text/javascript"> $(function(){
// 元素失去焦点进行验证 $(\'#base_part_edit_form .easyui-validatebox-blur\').bind(\'blur\', function(){ $(this).validatebox(\'enableValidation\'); });
// 元素获得焦点关闭验证 $(\'#base_part_edit_form .easyui-validatebox-blur\').bind(\'focus\', function(){ $(this).validatebox(\'disableValidation\'); }); }) </script>