如何做easyUI的自定義Validatebox 驗證框
阿新 • • 發佈:2018-12-18
如何實現和作用 通過 $.fn.validatebox.defaults 重寫預設的 defaults。 驗證框(validatebox)是為了驗證表單輸入欄位而設計的。如果使用者輸入無效的值,它將改變背景顏色,顯示警告圖示和提示訊息。驗證框(validatebox)可與表單(form)外掛整合,防止提交無效的欄位。 用法: 1.頁面直接實現
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">
2.js實現
$('#vv').validatebox({ required: true, validType: 'email' });
自定義validatebox
$.extend($.fn.validatebox.defaults.rules,{ maxLength:{ validator:function(value,param){ return value.length<=param[0]; }, message:'輸入的長度不能超過{0}個字元!' }, lsURL:{ validator:function(str_url){ var str=/^[a-zA-Z0-9_\/\-.=#?%:]{1,}$/; var re=new RegExp(str); if(str_url.match(re)) return true; }, message:'輸入URL格式不正確!' }, isJSON:{ validator:function(str){ if(typeof str=='string'){ try { var obj=JSON.parse(str); if(typeof obj=='object'&& obj){ return true; } } catch (e) { message:'輸入內容不是json格式!' } } }, message:'輸入內容不是json格式!' } })
常用的正則表示式驗證 1.只允許漢字、英文字母或數字
chsEngNum:{
validator: function (value, param) {
return /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$/.test(value);
},
message: '只允許漢字、英文字母或數字'
}
2.只允許漢字、英文字母或數字和(在開頭或者結尾處的)書名號
bookName:{ validator: function (value, param) { return /^(《|<)?([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*(》|>)?$/.test(value); }, message: '只允許漢字、英文字母或數字和(在開頭或者結尾處的)書名號' }
3.只允許漢字、英文字母、數字以及IP或MAC地址
ipMacChsEngNum:{
validator: function (value, param) {
var isChsEngNum = /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$/.test(value);
var isMac = /^([0-9a-fA-F][0-9a-fA-F]:){5}([0-9a-fA-F][0-9a-fA-F])$/.test(value);
var isIp4 = /^(((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))$/.test(value);
return isChsEngNum || isMac || isIp4;
},
message: '只允許漢字、英文字母、數字以及IP或MAC地址'
}
4.驗證標準的MAC地址格式
macAddress:{
validator: function (value, param) {
var isMac = /^([0-9a-fA-F][0-9a-fA-F](:|-)){5}([0-9a-fA-F][0-9a-fA-F])$/.test(value);
return isMac;
},
message: '不是標準的MAC地址格式'
}
5.IP地址
ipv4:{
validator: function (value, param) {
var isIp4 = /^(((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))$/.test(value);
return isIp4;
},
message: '只允許IP地址'
}
6.行動電話
mobilephone:{//行動電話
validator: function (value, param) {
var isMobilephone = /^((\+|00)86)?1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(value);
return isMobilephone;
},
message: '不是標準的電話號碼'
}
7.只能包含以下字元:數字,字母,漢字,下劃線,短橫線,英文括號,英文句號
specialCharFilter:{
validator:function(value){
var reg=/^[0-9a-zA-Z_\-\u4e00-\u9fa5\(\)\.\,]*$/;
return reg.test(value);
},
message:"只能包含以下字元:數字,字母,漢字,下劃線,短橫線,英文括號,英文句號"
}
8.包含特殊的敏感字元
sensitiveWordsFilter:{
validator:function(value){
var reg=/^.*(alert|alert\(.*\)|script|null).*$/;
return reg.test(value)==false;
},
message:"包含特殊的敏感字元"
}
9.只允許漢字、英文字母或數字
text:{
validator: function (value, param) {
return /^.+$/.test(value);
},
message: '只允許漢字、英文字母或數字'
}
10.最多輸入多少位
maxLength:{
validator: function (value,param) {
if(param == null || param == ""){
return true;
}
return value.length <= param[1];
},
message: "最多輸入{1}位"
}
11.該輸入項為必選項
needSelectOne:{
validator: function (value,param) {
if(param == null || param == ""){
return true;
}
if(value){
return true;
}else{
return false;
}
},
message: "該輸入項為必選項"
}