生活随笔
收集整理的這篇文章主要介紹了
easyui的验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
多重驗證：
Js代碼?? ?{?? ????????????????????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]']">?????????????????????? ?
?
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?/>?? ????網址驗證：<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位數字.'?? ????},?? ?????? ????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?=?'用戶名只能數字、字母、下劃線組成.';?? ????????????????????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?:?"輸入內容長度必須介于{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?:?{?? ????????????????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?:?{?? ????????????????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?:?'兩次輸入的密碼不一致!'?? ????????????}?? ????????});?? ? ? ?? $.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動態驗證提示信息的清除：
在使用帶 validatebox 的輸入框，第一次沒輸入出現如圖驗證提示信息
但是點擊窗口取消后，再次打開窗口后輸入框仍然帶有驗證信息，查看APi也沒有找到解決的方法于是分析了一下頁面代碼，采用下面處理成功，
??
? $(".validatebox-tip").remove();
? $(".validatebox-invalid").removeClass("validatebox-invalid");
??
另外，有一篇文章
easyui驗證的刪除和恢復 地址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');??? ?
設置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');?? ?????? ? ? ??
轉載于:https://www.cnblogs.com/t0404/p/10291051.html
總結
以上是生活随笔為你收集整理的easyui的验证的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
