Jquery EasyUI 驗證

EasyUI 自定義驗證

//擴充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: ''

//wsdl url位址驗證

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位址格式不正确'

} ,

// 下拉框驗證

selectValueRequired: {

validator: function(value,param){

if (value == "" || value.indexOf('請選擇') >= 0) {

return false;

}else {

return true;

}

message: '該下拉框為必選項'

} ,

// 判斷最小長度

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 : '兩次輸入的密碼不一緻!'

}

});

$.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;

}

});

使用方法：

<head>

$(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="使用者名已存在"/>

下拉框驗證：<select id="serviceType" name="serviceType" style="width: 150px" class="easyui-combobox" required="true" validType="selectValueRequired"></select>

</body>

</html>

Remote：遠端驗證

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: '原始密碼輸入錯誤！'

}

以上基本包括了EasyUI中的大部分驗證資訊，友善自己查詢。

Jquery EasyUI 驗證

繼續閱讀

jquery瀑布流插件-線上demo預覽

JavaScript（運算符、邏輯結構、循環）——筆記整理0512一、js裡邊的運算符二、js裡邊的邏輯結構三、js裡邊的循環四、js裡邊邏輯結構和循環的應用

leetcode電話号碼的字母組合

javascript使用ZeroClipboard元件複制内容到剪切闆

css超連結之新聞清單

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

如何才能學好Web前端技術？

初學web前端開發需要掌握什麼

前端開發技術彙總

如何正确的去學習web前端開發？

Jeecg-Boot 2.4.0版部署後無法加載驗證碼問題Provisional headers are shown Failed to load response data

springMvc如何和前端頁面互動，傳輸json資料springMvc和前端傳輸資料

聊一聊Swagger-UI的那些事情軟體簡介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的更新版的UI

javascript console對象解讀

JavaScript的那些坑之事件代理事件代理事件階段

jquery_126_demo