如何实现和作用
通过 $.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: "该输入项为必选项"
}