easyui validate -- radiocheckbox 校验扩展
Posted 【云】风过无痕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui validate -- radiocheckbox 校验扩展相关的知识，希望对你有一定的参考价值。
1、extension.js:
$.extend($.fn.validatebox.defaults.rules, { radio: { validator: function(value, param){ var input = $(param[0]),status = false; input.off(‘.radio‘).on(‘click.radio‘,function(){ $(this).focus(); try{ cntObj.tooltip(‘hide‘); }catch(e){} }); var firstObj = $(input[0]),cntObj = firstObj.parent(),initCount = cntObj.attr("initCount") || 0; 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){} }); var tipMsg = firstObj.validatebox.defaults.missingMessage || firstObj.validatebox.defaults.rules.checkbox.message; if(initCount-1<0){ firstObj.parent().tooltip({ position: ‘right‘, content: ‘<span style="color:#fff">‘+tipMsg+‘</span>‘, onShow: function(){ $(this).tooltip(‘tip‘).css({ backgroundColor: ‘#666‘, borderColor: ‘#666‘ }); } }).tooltip(‘hide‘); initCount = initCount - 0 + 1; cntObj.attr("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; inputs.each(function () { if (this.checked) checkNum++; }); inputs.off(‘.checkbox‘).on(‘click.checkbox‘,function(){ $(this).focus(); var bool = inputs.validatebox(‘isValid‘); if(bool) $(this).parent().tooltip(‘destroy‘); else { var tipMsg = $(this).validatebox.defaults.missingMessage || $(this).validatebox.defaults.rules.checkbox.message; $(this).parent().tooltip({ position: ‘right‘, content: ‘<span style="color:#fff">‘+tipMsg+‘</span>‘, onShow: function(){ $(this).tooltip(‘tip‘).css({ backgroundColor: ‘#666‘, borderColor: ‘#666‘ }); } }).tooltip(‘show‘); } }); status = checkNum > 0 && checkNum < 4; return status; }, message: ‘Please choose options !‘ } });
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>
以上是关于easyui validate -- radiocheckbox 校验扩展的主要内容，如果未能解决你的问题，请参考以下文章