生活随笔
收集整理的這篇文章主要介紹了
jQueryEasyUi验证
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
多重驗證：
Js代碼??
?{??????????????????????field?:?'startPort',??????????????????????title?:?"起始端口",??????????????????????editor:?"text",??????????????????????width?:?50,??????????????????????editor:?{??????????????????????????type:?'SuperValidatebox',??????????????????????????options:?{??????????????????????????????required:?true,??????????????????????????????validType:?['integer','length[0,5]']??????????????????????????}??????????????????????},??????????????????????????????????????????????自從1.3.2版本開始，validatebox自身已經(jīng)支持多重校驗了，例如：??input?class="easyui-validatebox"?data-options="required:true,validType:['email','length[0,20]']">?????????????????????? ?
?
Java代碼??
<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?()?{????????????????????????????????????????$('input[type=text]').validatebox();??????????})????????????</script>??</head>??<body>??????郵箱驗證：<input?type="text"?validtype="email"?required="true"?missingMessage="不能為空"?invalidMessage="郵箱格式不正確"?/><br?/>??????網(wǎng)址驗證：<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>?? ?
自定義驗證：
Java代碼??
$.extend($.fn.validatebox.defaults.rules,?{??????????CHS:?{??????????validator:?function?(value)?{??????????????return?/^[\u0391-\uFFE5]+$/.test(value);??????????},??????????message:?'只能輸入漢字'??????},??????????mobile:?{????????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位數(shù)字.'??????},??????????account:?{????????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?=?'用戶名只能數(shù)字、字母、下劃線組成.';??????????????????????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?:?{????????????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地址格式不正確'??????}??});??? ??
=================================
Java代碼??
$.extend($.fn.validatebox.defaults.rules,?{???????selectValueRequired:?{???????????validator:?function(value,param){??????????????????????????if?(value?==?""?||?value.indexOf('請選擇')?>=?0)?{???????????????????return?false;???????????????}else?{??????????????????return?true;???????????????}????????????},???????????message:?'該下拉框為必選項'???????}???});??? ?
Java代碼??
<select?id="serviceType"?name="serviceType"?style="width:?150px"?class="easyui-combobox"?required="true"?validType="selectValueRequired"></select>?? ?
?
===================================
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代碼??
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:?'原始密碼輸入錯誤！'??????????}?? ?
Java代碼??
<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>?? ?
====================================================================================
?
Js代碼??
$.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?:?"輸入內(nèi)容長度必須介于{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?:?'請輸入數(shù)字，并確保格式正確'??????????????},??????????????currency?:?{????????????????validator?:?function(value)?{??????????????????????return?/^\d+(\.\d+)?$/i.test(value);??????????????????},??????????????????message?:?'貨幣格式不正確'??????????????},??????????????qq?:?{????????????????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?:?'請輸入整數(shù)'??????????????},??????????????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字節(jié)，允許字母數(shù)字下劃線）'??????????????},??????????????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?:?{????????????????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?:?'發(fā)動機型號無效(例：FG6H012345654584)'??????????????},??????????????same?:?{??????????????????validator?:?function(value,?param)?{??????????????????????if?($("#"?+?param[0]).val()?!=?""?&&?value?!=?"")?{??????????????????????????return?$("#"?+?param[0]).val()?==?value;??????????????????????}?else?{??????????????????????????return?true;??????????????????????}??????????????????},??????????????????message?:?'兩次輸入的密碼不一致!'??????????????}??????????});??$.extend($.fn.validatebox.methods,?{??????????????remove?:?function(jq,?newposition)?{??????????????????return?jq.each(function()?{??????????????????????$(this).removeClass("validatebox-text?validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');??????????????????????????????????????????????????????????????????????});??????????????},??????????????reduce?:?function(jq,?newposition)?{??????????????????return?jq.each(function()?{??????????????????????var?opt?=?$(this).data().validatebox.options;??????????????????????$(this).addClass("validatebox-text").validatebox(opt);??????????????????????????????????????????????});??????????????},??????????????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動態(tài)驗證提示信息的清除：
在使用帶 validatebox 的輸入框，第一次沒輸入出現(xiàn)如圖驗證提示信息
但是點擊窗口取消后，再次打開窗口后輸入框仍然帶有驗證信息，查看APi也沒有找到解決的方法于是分析了一下頁面代碼，采用下面處理成功，
??
? $(".validatebox-tip").remove();
? $(".validatebox-invalid").removeClass("validatebox-invalid");
??
另外，有一篇文章
easyui驗證的刪除和恢復(fù) 地址http://liuna718-163-com.iteye.com/blog/1726145 供參考
引用一下他的代碼：
Js代碼??
$.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');? ?
設(shè)置Datagrid中Editor中驗證的清除：
Js代碼??
$.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');??? ? ??
轉(zhuǎn)載于:https://www.cnblogs.com/zxw0004/p/5100503.html
總結(jié)
以上是生活随笔為你收集整理的jQueryEasyUi验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
