easyui validate -- radio、checkbox 校验扩展，事件域名
2024-10-12 13:56:46
事件域名： $(dom).on('click.myNameSpace',function(){ ... })，其中‘.myNameSpace’便是域名；
目前作用：$(dom).off('click.myNameSpace')，解绑指定的域名事件，其他绑定的click逻辑依旧正常。
1、extension.js:
// extend the [phone,idCard,date,time,radio,checkbox] rules
$.extend($.fn.validatebox.defaults.rules, {
phone: {
validator: function(value,param){
if(!(/^1[34578]\d{9}$/.test(value))) return false;
return true;
},
message: 'Field do not match.'
},
idCard: {
validator: function(value,param){
var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
if(reg.test(value)) return true;
return false;
},
message: 'Field do not match.'
},
date: {
validator: function(value,param){
var reg = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/;
if(reg.test(value)) return true;
return false;
},
message: 'Field do not match.'
},
time: {
validator: function(value,param){
var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-)) (20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$/;
if(reg.test(value)){
return true;
}
return false;
},
message: 'Field do not match.'
},
radio: {
validator: function(value, param){
var input = $(param[0]),status = false,firstObj = $(input[0]),
cntObj = firstObj.parent(),initCount = cntObj.attr("initCount") || 0;
input.off('.radio').on('click.radio',function(){
$(this).focus();
try{ cntObj.tooltip('hide'); }catch(e){}
});
cntObj.off("mouseover mouseout").on("mouseover mouseout",function(event){
var bool = input.validatebox('isValid');
if(event.type == "mouseover"){
if(bool) try{ cntObj.tooltip('hide'); }catch(e){}
else try{ cntObj.tooltip('show');}catch(e){}
}else if(event.type == "mouseout") try{ cntObj.tooltip('hide'); }catch(e){}
});
if(initCount-1<0){
tipProcess(firstObj,"initCount");
initCount ++ ;
}
status = $(param[0] + ':checked').val() != undefined;
return status;
},
message: 'Please choose option for {1}.'
},
checkbox: {
validator: function (value, param) {
var inputs = $(param[0]), maxNum = param[1], checkNum = 0,status=false,
firstObj = $(inputs[0]),cntObj = firstObj.parent(),initCount = cntObj.attr("initCount") || 0;
inputs.each(function () {
if (this.checked) checkNum++;
});
inputs.off('.checkbox').on('click.checkbox',function(){
//$(this).focus();
var bool = inputs.validatebox('isValid');
if(bool) try{ cntObj.tooltip('hide'); }catch(e){}
else try{ cntObj.tooltip('show');}catch(e){}
});
cntObj.off("mouseover mouseout").on("mouseover mouseout",function(event){
var bool = inputs.validatebox('isValid');
if(event.type == "mouseover"){
if(bool) try{ cntObj.tooltip('hide'); }catch(e){}
else try{ cntObj.tooltip('show');}catch(e){}
}else if(event.type == "mouseout") try{ cntObj.tooltip('hide'); }catch(e){}
});
if(initCount-1<0){
tipProcess(firstObj,"initCount");
initCount ++ ;
}
status = checkNum > 0 ;
return status;
},
message: 'Please choose options !'
}
});
function tipProcess(firstObj,countFlag){
var dataOps = firstObj.validatebox('options'),ctn=firstObj.parent(),
tipMsg = dataOps.missingMessage || dataOps.invalidMessage || firstObj.validatebox.defaults.rules.checkbox.message;
ctn.tooltip({ position: 'right', content: '<span style="color:#000">'+tipMsg+'</span>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: 'rgb(255, 255, 204)',
borderColor: 'rgb(204, 153, 51)'
});
}
}).tooltip('hide');
var initCount = 0;
if(countFlag) {
initCount = ctn.attr(countFlag);
initCount = initCount - 0 + 1;
ctn.attr(countFlag,initCount);
}
}
2、html：（相关资源自行引入）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate Form on Submit - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/extension/extension.js"></script>
<script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>Validate Form on Submit</h2>
<p>The form does not perform validation before being submitted.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:400px">
<div style="padding:10px 60px 20px 60px">
<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
<table cellpadding="5">
<tr>
<td>Name:</td>
<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>Subject:</td>
<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
</tr>
<tr>
<td>Message:</td>
<td>
<div>
<input class="easyui-validatebox" type="radio" name="yes_no" value="1" data-options="validType:'radio[\'#ff input[name=yes_no]\', \'Yes or no\']'">Yes
<input class="easyui-validatebox" type="radio" name="yes_no" value="0">No
</div>
</td>
</tr>
<tr>
<td>Language:</td>
<td>
<div>
<input type="checkbox" name="cb1" class="easyui-validatebox" value="1" validType="checkbox['#ff input[name=cb1]']"/>ck1
<input type="checkbox" name="cb1" class="easyui-validatebox" value="2"/>ck2
<input type="checkbox" name="cb1" class="easyui-validatebox" value="3" />ck3
<input type="checkbox" name="cb1" class="easyui-validatebox" value="4" />ck4
</div>
</td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
</div>
</div> </div>
<script>
function submitForm(){
$('#ff').form('submit',{
onSubmit:function(){
return $(this).form('enableValidation').form('validate');
}
});
}
function clearForm(){
$('#ff').form('clear');
} </script>
</body>
</html>
最新文章
- Codeforces 刷水记录
- DIV的摇晃效果---jquery实现
- 【转】ODBC、OLE DB、 ADO的区别
- linux截图工具scrot
- Asp.Net Web API VS Asp.Net MVC
- Python学习笔记：05类
- 基于avalon1.4.x ----分页组件编写
- Spring AOP AspectJ Pointcut 表达式例子
- zf-关于表单不能提交的bug修改
- CodeForces 722A
- kafka环境
- python3 爬虫开发 学习总结一
- gitlab 随笔
- let和const
- WPF常用TriggerAction用法 (一)
- 关于K8S证书生成方面的脚本草稿
- HttpWebRequst中https的验证处理问题
- ubuntu开机自动运行用Qt写的程序
- 逻辑回归 logit
- hdu2824 The Euler function（欧拉函数个数）