jQueryEasyU校驗郵箱、手機號等
阿新 • • 發佈:2019-02-12
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"
- <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=
- 手機驗證:<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>
自定義驗證:
Java程式碼- //擴充套件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] + '範圍';
- returnfalse;
- } else {
- if (!/^[\w]+$/.test(value)) {
- $.fn.validatebox.defaults.rules.account.message = '使用者名稱只能數字、字母、下劃線組成.';
- returnfalse;
- } else {
- returntrue;
- }
- }
- }, 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地址格式不正確'
- }
- });
=================================
Java程式碼- $.extend($.fn.validatebox.defaults.rules, {
- selectValueRequired: {
- validator: function(value,param){
- if (value == "" || value.indexOf('請選擇') >= 0) {
- returnfalse;
- }else {
- returntrue;
- }
- },
- message: '該下拉框為必選項'
- }
- });
$.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>
<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: '原始密碼輸入錯誤!'
- }
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>
<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程式碼- /**
- * 擴充套件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 {
- returntrue;
- }
- },
- 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") {
- returntrue;
- }
- if (opts.required) {
- if (value == "") {
- box.addClass("validatebox-invalid");
- setTipMessage(opts.missingMessage);
- $(jq).validatebox('showTip', jq);
- returnfalse;
- }
- }
- 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);
- returnfalse;
- }
- }
- }
- box.removeClass("validatebox-invalid");
- $(jq).validatebox('hideTip', jq);
- returntrue;
- },
- 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;
- }
- }
- });
在使用帶 va