EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证
生活随笔
收集整理的這篇文章主要介紹了
EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?{?? ????????????????????field?:?'startPort',?? ????????????????????title?:?"起始端口",?? ????????????????????editor:?"text",?? ????????????????????width?:?50,?? ????????????????????editor:?{?? ????????????????????????type:?'SuperValidatebox',?? ????????????????????????options:?{?? ????????????????????????????required:?true,?? ????????????????????????????validType:?['integer','length[0,5]']?? ????????????????????????}?? ????????????????????},?? ?????????????????????? ?????????????????????? 自從1.3.2版本開始，validatebox自身已經支持多重校驗了，例如：?? input?class="easyui-validatebox"?data-options="required:true,validType:['email','length[0,20]']">?????????????????????? {field : 'startPort',title : "起始端口",editor: "text",width : 50,editor: {type: 'SuperValidatebox',options: {required: true,validType: ['integer','length[0,5]']}},自從1.3.2版本開始，validatebox自身已經支持多重校驗了，例如：
input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">
<html?xmlns="http://www.w3.org/1999/xhtml">?? <head>?? ????<script?src="easyui1.2.4/jquery-1.6.min.js"?type="text/javascript"></script>?? ????<script?src="easyui1.2.4/jquery.easyui.min.js"?type="text/javascript"></script>?? ????<!--自定義驗證-->?? ????<script?src="easyui1.2.4/validator.js"?type="text/javascript"></script>?? ????<link?href="easyui1.2.4/themes/default/easyui.css"?rel="stylesheet"?type="text/css"?/>?? ????<script>?? ?? ????????$(function?()?{?? ?????????????? ????????????//設置text需要驗證?? ????????????$('input[type=text]').validatebox();?? ????????})?? ?????? ????</script>?? </head>?? <body>?? ????郵箱驗證：<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="用戶名已存在"/>?? </body>?? </html>?? <html xmlns="http://www.w3.org/1999/xhtml">
<head><script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script><script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script><!--自定義驗證--><script src="easyui1.2.4/validator.js" type="text/javascript"></script><link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" /><script>$(function () {//設置text需要驗證$('input[type=text]').validatebox();})</script>
</head>
<body>郵箱驗證：<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="用戶名已存在"/>
</body>
</html> //擴展easyui表單的驗證?? $.extend($.fn.validatebox.defaults.rules,?{?? ????//驗證漢子?? ????CHS:?{?? ????????validator:?function?(value)?{?? ????????????return?/^[\u0391-\uFFE5]+$/.test(value);?? ????????},?? ????????message:?'只能輸入漢字'?? ????},?? ????//移動手機號碼驗證?? ????mobile:?{//value值為文本框中的值?? ????????validator:?function?(value)?{?? ????????????var?reg?=?/^1[3|4|5|8|9]\d{9}$/;?? ????????????return?reg.test(value);?? ????????},?? ????????message:?'輸入手機號碼格式不準確.'?? ????},?? ????//國內郵編驗證?? ????zipcode:?{?? ????????validator:?function?(value)?{?? ????????????var?reg?=?/^[1-9]\d{5}$/;?? ????????????return?reg.test(value);?? ????????},?? ????????message:?'郵編必須是非0開始的6位數字.'?? ????},?? ????//用戶賬號驗證(只能包括?_?數字?字母)??? ????account:?{//param的值為[]中值?? ????????validator:?function?(value,?param)?{?? ????????????if?(value.length?<?param[0]?||?value.length?>?param[1])?{?? ????????????????$.fn.validatebox.defaults.rules.account.message?=?'用戶名長度必須在'?+?param[0]?+?'至'?+?param[1]?+?'范圍';?? ????????????????return?false;?? ????????????}?else?{?? ????????????????if?(!/^[\w]+$/.test(value))?{?? ????????????????????$.fn.validatebox.defaults.rules.account.message?=?'用戶名只能數字、字母、下劃線組成.';?? ????????????????????return?false;?? ????????????????}?else?{?? ????????????????????return?true;?? ????????????????}?? ????????????}?? ????????},?message:?''?? ????}?? })?? //擴展easyui表單的驗證
$.extend($.fn.validatebox.defaults.rules, {//驗證漢子CHS: {validator: function (value) {return /^[\u0391-\uFFE5]+$/.test(value);},message: '只能輸入漢字'},//移動手機號碼驗證mobile: {//value值為文本框中的值validator: function (value) {var reg = /^1[3|4|5|8|9]\d{9}$/;return reg.test(value);},message: '輸入手機號碼格式不準確.'},//國內郵編驗證zipcode: {validator: function (value) {var reg = /^[1-9]\d{5}$/;return reg.test(value);},message: '郵編必須是非0開始的6位數字.'},//用戶賬號驗證(只能包括 _ 數字 字母) account: {//param的值為[]中值validator: function (value, param) {if (value.length < param[0] || value.length > param[1]) {$.fn.validatebox.defaults.rules.account.message = '用戶名長度必須在' + param[0] + '至' + param[1] + '范圍';return false;} else {if (!/^[\w]+$/.test(value)) {$.fn.validatebox.defaults.rules.account.message = '用戶名只能數字、字母、下劃線組成.';return false;} else {return true;}}}, message: ''}
}) Js代碼 ? $.extend($.fn.validatebox.defaults.rules,?{??????????? ????????checkWSDL:?{????? ????????????validator:?function(value,param){??????????????? ?????????????????var?reg?=?"^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";?? ?????????????????return?reg.test(value);?? ????????????},????? ????????????message:?'請輸入合法的WSDL地址'????? ????????},?? ????????checkIp?:?{//?驗證IP地址?? ????????????validator?:?function(value)?{?? ????????????????var?reg?=?/^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/?;?? ????????????????return?reg.test(value);?? ????????????},?? ????????????message?:?'IP地址格式不正確'?? ????}?? });??? $.extend($.fn.validatebox.defaults.rules, { checkWSDL: { validator: function(value,param){ var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";return reg.test(value);}, message: '請輸入合法的WSDL地址' },checkIp : {// 驗證IP地址validator : function(value) {var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;return reg.test(value);},message : 'IP地址格式不正確'}
}); $.extend($.fn.validatebox.defaults.rules,?{??? ????selectValueRequired:?{??? ????????validator:?function(value,param){????????????? ?????????????if?(value?==?""?||?value.indexOf('請選擇')?>=?0)?{??? ????????????????return?false;?? ?????????????}else?{?? ????????????????return?true;?? ?????????????}???? ????????},??? ????????message:?'該下拉框為必選項'??? ????}??? });??? $.extend($.fn.validatebox.defaults.rules, { selectValueRequired: { validator: function(value,param){ if (value == "" || value.indexOf('請選擇') >= 0) { return false;}else {return true;} }, message: '該下拉框為必選項' }
}); <select?id="serviceType"?name="serviceType"?style="width:?150px"?class="easyui-combobox"?required="true"?validType="selectValueRequired"></select>?? <select id="serviceType" name="serviceType" style="width: 150px" class="easyui-combobox" required="true" validType="selectValueRequired"></select> equalTo?:?{?? ????????????validator?:?function(value,?param)?{?? ????????????????return?$("#"?+?param[0]).val()?==?value;?? ????????????},?? ????????????message?:?'兩次輸入的密碼不一致!'?? ????????},?? ????????checkPassword?:{?? ????????????validator?:?function(value,param){?? ????????????????var?sysUser?=?{};?? ????????????????var?flag?;?? ????????????????sysUser.userPassword?=?value;?? ????????????????$.ajax({?? ????????????????????url?:?root?+?'login/checkPwd.do',?? ????????????????????type?:?'POST',???????????????????? ????????????????????timeout?:?60000,?? ????????????????????data:sysUser,?? ????????????????????async:?false,???? ????????????????????success?:?function(data,?textStatus,?jqXHR)?{????? ????????????????????????if?(data?==?"0")?{?? ????????????????????????????flag?=?true;?????? ????????????????????????}else{?? ????????????????????????????flag?=?false;?? ????????????????????????}?? ????????????????????}?? ????????????????});?? ????????????????if(flag){?? ????????????????????$("#userPassword").removeClass('validatebox-invalid');?? ????????????????}?? ????????????????return?flag;?? ????????????},?? ????????????message:?'原始密碼輸入錯誤！'?? ????????}?? equalTo : {validator : function(value, param) {return $("#" + param[0]).val() == value;},message : '兩次輸入的密碼不一致!'},checkPassword :{validator : function(value,param){var sysUser = {};var flag ;sysUser.userPassword = value;$.ajax({url : root + 'login/checkPwd.do',type : 'POST', timeout : 60000,data:sysUser,async: false, success : function(data, textStatus, jqXHR) { if (data == "0") {flag = true; }else{flag = false;}}});if(flag){$("#userPassword").removeClass('validatebox-invalid');}return flag;},message: '原始密碼輸入錯誤！'} <table?cellpadding="0"?align="center"?style="width:?98%;?height:?98%;?text-align:?right;">?? ????<tr>?? ????????<td>請輸入原密碼：</td>?? ????????<td?style="text-align:?left;?padding-left:?10px;"><input?type="password"?id="userPassword"?name="userPassword"?class="easyui-validatebox"?? ????????????data-options="required:true"?validType="checkPassword"/>?? ????????</td>?? ????</tr>?? ????<tr>?? ????????<td>請輸入新密碼：</td>?? ????????<td?style="text-align:?left;?padding-left:?10px;"><input?type="password"?id="newPassword"?name="newPassword"?class="easyui-validatebox"?? ????????????data-options="required:true"?/>?? ????????</td>?? ????</tr>?? ????<tr>?? ????????<td>請確認輸入新密碼：</td>?? ????????<td?style="text-align:?left;?padding-left:?10px;"><input?type="password"?id="reNewPassword"?name="reNewPassword"?? ????????????class="easyui-validatebox"?data-options="required:true"??validType="equalTo['newPassword']"?/>?? ????????</td>?? ????</tr>?? </table>?? <table cellpadding="0" align="center" style="width: 98%; height: 98%; text-align: right;"><tr><td>請輸入原密碼：</td><td style="text-align: left; padding-left: 10px;"><input type="password" id="userPassword" name="userPassword" class="easyui-validatebox"data-options="required:true" validType="checkPassword"/></td></tr><tr><td>請輸入新密碼：</td><td style="text-align: left; padding-left: 10px;"><input type="password" id="newPassword" name="newPassword" class="easyui-validatebox"data-options="required:true" /></td></tr><tr><td>請確認輸入新密碼：</td><td style="text-align: left; padding-left: 10px;"><input type="password" id="reNewPassword" name="reNewPassword"class="easyui-validatebox" data-options="required:true" validType="equalTo['newPassword']" /></td></tr>
</table> /**? ?*?擴展easyui的validator插件rules，支持更多類型驗證? ?*/?? $.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?/^(13|15|18)\d{9}$/i.test(value);?? ????????????????},?? ????????????????message?:?'手機號碼格式不正確'?? ????????????},?? ????????????phoneAndMobile?:?{//?電話號碼或手機號碼?? ????????????????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)?||?/^(13|15|18)\d{9}$/i.test(value);?? ????????????????},?? ????????????????message?:?'電話號碼或手機號碼格式不正確'?? ????????????},?? ????????????idcard?:?{//?驗證身份證?? ????????????????validator?:?function(value)?{?? ????????????????????return?/^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value)?||?/^\d{18}(\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?:?'請輸入整數'?? ????????????},?? ????????????chinese?:?{//?驗證中文?? ????????????????validator?:?function(value)?{?? ????????????????????return?/^[\u0391-\uFFE5]+$/i.test(value);?? ????????????????},?? ????????????????message?:?'請輸入中文'?? ????????????},?? ????????????chineseAndLength?:?{//?驗證中文及長度?? ????????????????validator?:?function(value)?{?? ????????????????????var?len?=?$.trim(value).length;?? ????????????????????if?(len?>=?param[0]?&&?len?<=?param[1])?{?? ????????????????????????return?/^[\u0391-\uFFE5]+$/i.test(value);?? ????????????????????}?? ????????????????},?? ????????????????message?:?'請輸入中文'?? ????????????},?? ????????????english?:?{//?驗證英語?? ????????????????validator?:?function(value)?{?? ????????????????????return?/^[A-Za-z]+$/i.test(value);?? ????????????????},?? ????????????????message?:?'請輸入英文'?? ????????????},?? ????????????englishAndLength?:?{//?驗證英語及長度?? ????????????????validator?:?function(value,?param)?{?? ????????????????????var?len?=?$.trim(value).length;?? ????????????????????if?(len?>=?param[0]?&&?len?<=?param[1])?{?? ????????????????????????return?/^[A-Za-z]+$/i.test(value);?? ????????????????????}?? ????????????????},?? ????????????????message?:?'請輸入英文'?? ????????????},?? ????????????englishUpperCase?:?{//?驗證英語大寫?? ????????????????validator?:?function(value)?{?? ????????????????????return?/^[A-Z]+$/.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?/^((\(\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?:?'請輸入姓名'?? ????????????},?? ????????????engOrChinese?:?{//?可以是中文或英文?? ????????????????validator?:?function(value)?{?? ????????????????????return?/^[\u0391-\uFFE5]+$/i.test(value)?|?/^\w+[\w\s]+\w+$/i.test(value);?? ????????????????},?? ????????????????message?:?'請輸入中文'?? ????????????},?? ????????????engOrChineseAndLength?:?{//?可以是中文或英文?? ????????????????validator?:?function(value)?{?? ????????????????????var?len?=?$.trim(value).length;?? ????????????????????if?(len?>=?param[0]?&&?len?<=?param[1])?{?? ????????????????????????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?:?'車牌號碼無效（例：粵B12350）'?? ????????????},?? ????????????carenergin?:?{?? ????????????????validator?:?function(value)?{?? ????????????????????return?/^[a-zA-Z0-9]{16}$/.test(value);?? ????????????????},?? ????????????????message?:?'發動機型號無效(例：FG6H012345654584)'?? ????????????},?? ????????????same?:?{?? ????????????????validator?:?function(value,?param)?{?? ????????????????????if?($("#"?+?param[0]).val()?!=?""?&&?value?!=?"")?{?? ????????????????????????return?$("#"?+?param[0]).val()?==?value;?? ????????????????????}?else?{?? ????????????????????????return?true;?? ????????????????????}?? ????????????????},?? ????????????????message?:?'兩次輸入的密碼不一致!'?? ????????????}?? ????????});?? /**? ?*?擴展easyui?validatebox的兩個方法.移除驗證和還原驗證? ?*/?? $.extend($.fn.validatebox.methods,?{?? ????????????remove?:?function(jq,?newposition)?{?? ????????????????return?jq.each(function()?{?? ????????????????????$(this).removeClass("validatebox-text?validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');?? ????????????????????????//?remove?tip?? ????????????????????????//?$(this).validatebox('hideTip',?this);?? ????????????????????});?? ????????????},?? ????????????reduce?:?function(jq,?newposition)?{?? ????????????????return?jq.each(function()?{?? ????????????????????var?opt?=?$(this).data().validatebox.options;?? ????????????????????$(this).addClass("validatebox-text").validatebox(opt);?? ????????????????????????//?$(this).validatebox('validateTip',?this);?? ????????????????????});?? ????????????},?? ????????????validateTip?:?function(jq)?{?? ????????????????jq?=?jq[0];?? ????????????????var?opts?=?$.data(jq,?"validatebox").options;?? ????????????????var?tip?=?$.data(jq,?"validatebox").tip;?? ????????????????var?box?=?$(jq);?? ????????????????var?value?=?box.val();?? ????????????????function?setTipMessage(msg)?{?? ????????????????????$.data(jq,?"validatebox").message?=?msg;?? ????????????????};?? ????????????????var?disabled?=?box.attr("disabled");?? ????????????????if?(disabled?==?true?||?disabled?==?"true")?{?? ????????????????????return?true;?? ????????????????}?? ????????????????if?(opts.required)?{?? ????????????????????if?(value?==?"")?{?? ????????????????????????box.addClass("validatebox-invalid");?? ????????????????????????setTipMessage(opts.missingMessage);?? ????????????????????????$(jq).validatebox('showTip',?jq);?? ????????????????????????return?false;?? ????????????????????}?? ????????????????}?? ????????????????if?(opts.validType)?{?? ????????????????????var?result?=?/([a-zA-Z_]+)(.*)/.exec(opts.validType);?? ????????????????????var?rule?=?opts.rules[result[1]];?? ????????????????????if?(value?&&?rule)?{?? ????????????????????????var?param?=?eval(result[2]);?? ????????????????????????if?(!rule["validator"](value,?param))?{?? ????????????????????????????box.addClass("validatebox-invalid");?? ????????????????????????????var?message?=?rule["message"];?? ????????????????????????????if?(param)?{?? ????????????????????????????????for?(var?i?=?0;?i?<?param.length;?i++)?{?? ????????????????????????????????????message?=?message.replace(new?RegExp("\\{"?+?i?+?"\\}",?"g"),?param[i]);?? ????????????????????????????????}?? ????????????????????????????}?? ????????????????????????????setTipMessage(opts.invalidMessage?||?message);?? ????????????????????????????$(jq).validatebox('showTip',?jq);?? ????????????????????????????return?false;?? ????????????????????????}?? ????????????????????}?? ????????????????}?? ????????????????box.removeClass("validatebox-invalid");?? ????????????????$(jq).validatebox('hideTip',?jq);?? ????????????????return?true;?? ????????????},?? ????????????showTip?:?function(jq)?{?? ????????????????jq?=?jq[0];?? ????????????????var?box?=?$(jq);?? ????????????????var?msg?=?$.data(jq,?"validatebox").message?? ????????????????var?tip?=?$.data(jq,?"validatebox").tip;?? ????????????????if?(!tip)?{?? ????????????????????tip?=?$("<div?class=\"validatebox-tip\">"?+?"<span?class=\"validatebox-tip-content\">"?+?"</span>"?+?"<span?class=\"validatebox-tip-pointer\">"?+?"</span>"?+?"</div>").appendTo("body");?? ????????????????????$.data(jq,?"validatebox").tip?=?tip;?? ????????????????}?? ????????????????tip.find(".validatebox-tip-content").html(msg);?? ????????????????tip.css({?? ????????????????????????????display?:?"block",?? ????????????????????????????left?:?box.offset().left?+?box.outerWidth(),?? ????????????????????????????top?:?box.offset().top?? ????????????????????????});?? ????????????},?? ????????????hideTip?:?function(jq)?{?? ????????????????jq?=?jq[0];?? ????????????????var?tip?=?$.data(jq,?"validatebox").tip;?? ????????????????if?(tip)?{?? ????????????????????tip.remove;?? ????????????????????$.data(jq,?"validatebox").tip?=?null;?? ????????????????}?? ????????????}?? ????????});?? /*** 擴展easyui的validator插件rules，支持更多類型驗證*/
$.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 /^(13|15|18)\d{9}$/i.test(value);},message : '手機號碼格式不正確'},phoneAndMobile : {// 電話號碼或手機號碼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) || /^(13|15|18)\d{9}$/i.test(value);},message : '電話號碼或手機號碼格式不正確'},idcard : {// 驗證身份證validator : function(value) {return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\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 : '請輸入整數'},chinese : {// 驗證中文validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value);},message : '請輸入中文'},chineseAndLength : {// 驗證中文及長度validator : function(value) {var len = $.trim(value).length;if (len >= param[0] && len <= param[1]) {return /^[\u0391-\uFFE5]+$/i.test(value);}},message : '請輸入中文'},english : {// 驗證英語validator : function(value) {return /^[A-Za-z]+$/i.test(value);},message : '請輸入英文'},englishAndLength : {// 驗證英語及長度validator : function(value, param) {var len = $.trim(value).length;if (len >= param[0] && len <= param[1]) {return /^[A-Za-z]+$/i.test(value);}},message : '請輸入英文'},englishUpperCase : {// 驗證英語大寫validator : function(value) {return /^[A-Z]+$/.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 /^((\(\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 : '請輸入姓名'},engOrChinese : {// 可以是中文或英文validator : function(value) {return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);},message : '請輸入中文'},engOrChineseAndLength : {// 可以是中文或英文validator : function(value) {var len = $.trim(value).length;if (len >= param[0] && len <= param[1]) {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 : '車牌號碼無效（例：粵B12350）'},carenergin : {validator : function(value) {return /^[a-zA-Z0-9]{16}$/.test(value);},message : '發動機型號無效(例：FG6H012345654584)'},same : {validator : function(value, param) {if ($("#" + param[0]).val() != "" && value != "") {return $("#" + param[0]).val() == value;} else {return true;}},message : '兩次輸入的密碼不一致!'}});
/*** 擴展easyui validatebox的兩個方法.移除驗證和還原驗證*/
$.extend($.fn.validatebox.methods, {remove : function(jq, newposition) {return jq.each(function() {$(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');// remove tip// $(this).validatebox('hideTip', this);});},reduce : function(jq, newposition) {return jq.each(function() {var opt = $(this).data().validatebox.options;$(this).addClass("validatebox-text").validatebox(opt);// $(this).validatebox('validateTip', this);});},validateTip : function(jq) {jq = jq[0];var opts = $.data(jq, "validatebox").options;var tip = $.data(jq, "validatebox").tip;var box = $(jq);var value = box.val();function setTipMessage(msg) {$.data(jq, "validatebox").message = msg;};var disabled = box.attr("disabled");if (disabled == true || disabled == "true") {return true;}if (opts.required) {if (value == "") {box.addClass("validatebox-invalid");setTipMessage(opts.missingMessage);$(jq).validatebox('showTip', jq);return false;}}if (opts.validType) {var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType);var rule = opts.rules[result[1]];if (value && rule) {var param = eval(result[2]);if (!rule["validator"](value, param)) {box.addClass("validatebox-invalid");var message = rule["message"];if (param) {for (var i = 0; i < param.length; i++) {message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]);}}setTipMessage(opts.invalidMessage || message);$(jq).validatebox('showTip', jq);return false;}}}box.removeClass("validatebox-invalid");$(jq).validatebox('hideTip', jq);return true;},showTip : function(jq) {jq = jq[0];var box = $(jq);var msg = $.data(jq, "validatebox").messagevar tip = $.data(jq, "validatebox").tip;if (!tip) {tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");$.data(jq, "validatebox").tip = tip;}tip.find(".validatebox-tip-content").html(msg);tip.css({display : "block",left : box.offset().left + box.outerWidth(),top : box.offset().top});},hideTip : function(jq) {jq = jq[0];var tip = $.data(jq, "validatebox").tip;if (tip) {tip.remove;$.data(jq, "validatebox").tip = null;}}}); $.extend($.fn.validatebox.methods,?{???? ????remove:?function(jq,?newposition){???? ????????return?jq.each(function(){???? ????????????$(this).removeClass("validatebox-text?validatebox-invalid").unbind('focus').unbind('blur');?? ????????});???? ????},?? ????reduce:?function(jq,?newposition){???? ????????return?jq.each(function(){???? ???????????var?opt?=?$(this).data().validatebox.options;?? ???????????$(this).addClass("validatebox-text").validatebox(opt);?? ????????});???? ????}????? });?? ?? //使用?? $('#id').validatebox('remove');?//刪除?? $('#id').validatebox('reduce');?//恢復?? $.extend($.fn.validatebox.methods, { remove: function(jq, newposition){ return jq.each(function(){ $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus').unbind('blur');}); },reduce: function(jq, newposition){ return jq.each(function(){ var opt = $(this).data().validatebox.options;$(this).addClass("validatebox-text").validatebox(opt);}); }
});//使用
$('#id').validatebox('remove'); //刪除
$('#id').validatebox('reduce'); //恢復 $.extend($.fn.datagrid.methods,?{?????? ????????setDColumnTitle:?function(jq,?option){?????? ????????????if(option.field){???? ????????????????return?jq.each(function(){?????? ????????????????????var?$panel?=?$(this).datagrid("getPanel");???? ????????????????????var?$field?=?$('td[field='+option.field+']',$panel);???? ????????????????????if($field.length){???? ????????????????????????var?$span?=?$("span",$field).eq(0);???? ????????????????????????var?$span1?=?$("span",$field).eq(1);???? ????????????????????????$span.html(option.title);???? ????????????????????????$span1.html(option.title);???? ????????????????????}???? ????????????????});???? ????????????}???? ????????????return?jq;?????????? ????????}?,?? ????????? ????????removeRequired:?function(jq,?field){?????? ????????????if(field){???? ????????????????return?jq.each(function(){?????? ????????????????????var?$panel?=?$(this).datagrid("getPanel");???? ????????????????????var?$field?=?$('td[field='+field+']',$panel);???? ????????????????????if($field.length){???? ????????????????????????var?$input?=?$("input",$field);????????????????????????? ????????????????????????$input.removeClass("validatebox-text?validatebox-invalid").unbind('focus').unbind('blur');?? ????????????????????}???? ????????????????});???? ????????????}???? ????????????return?jq;?????????????????? ????????},???? ????????addRequired:?function(jq,?field){??? ????????????if(field){???? ????????????????return?jq.each(function(){?????? ????????????????????var?$panel?=?$(this).datagrid("getPanel");???? ????????????????????var?$field?=?$('td[field='+field+']',$panel);???? ????????????????????if($field.length){???? ????????????????????????var?$input?=?$("input",$field);????????????????????????? ????????????????????????$input.addClass("validatebox-text?validatebox-invalid").unbind('focus').unbind('blur');?? ????????????????????}???? ????????????????});???? ????????????}????????????? ????????}??? });??? ?????? 使用：?? $obj.datagrid('removeRequired','startPort');?? $obj.datagrid('addRequired','startPort');?
?
?
Java代碼 ??
自定義驗證：
Java代碼 ???
=================================
Java代碼 ??
Java代碼 ??
?
===================================
Remote：遠程驗證
Easyui validatebox修改
http://blog.csdn.net/qlh2863/article/details/7269689
http://www.cnblogs.com/qiancheng509/archive/2012/11/23/2783700.html
http://blog.csdn.net/dyllove98/article/details/8866711
?
自己代碼：
Java代碼 ??
Java代碼 ??
====================================================================================
?
Js代碼 ??
?
?easyUi動態驗證提示信息的清除：
在使用帶 validatebox 的輸入框，第一次沒輸入出現如圖驗證提示信息
但是點擊窗口取消后，再次打開窗口后輸入框仍然帶有驗證信息，查看APi也沒有找到解決的方法于是分析了一下頁面代碼，采用下面處理成功，
??
? $(".validatebox-tip").remove();
? $(".validatebox-invalid").removeClass("validatebox-invalid");
??
另外，有一篇文章
easyui驗證的刪除和恢復 地址http://liuna718-163-com.iteye.com/blog/1726145 供參考
引用一下他的代碼：
Js代碼 ??
設置Datagrid中Editor中驗證的清除：
Js代碼 ?總結
以上是生活随笔為你收集整理的EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何去除猪肉章？？
- 下一篇： 1、MyEclipse插件配置以及通过M