Easyui validatebox后台服务端验证
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>
