jQuery.validator.addMethod自定义验证方法
2015-08-18 21:35
666 查看
在开发中用到了jQuery的validate控件,有时需要自定义验证方法。我们可以通过jQuery.validator.addMethod()来实现，下面是例子：
[html] view
plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<link href="../js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<!-- 引入JS库文件 -->
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="../js/tablecolor.js" type="text/javascript"></script>
<script src="../js/jquery-form/jquery.form.js" type="text/javascript"></script>
<script src="../js/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
<script src="../js/jquery-validation/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function() {
//保存
$("#appEdit_btok").click(function () {
$("#appEdit_Form").submit();
});
//自定义评语内容验证方法
jQuery.validator.addMethod("levelLimit",function(value, element){
var returnVal = false;
var level = $("#code").attr("level");
if(level=="1" || level=="0"){
returnVal = true;
}
return returnVal;
},"level不能为2!");
$("#appEdit_Form").validate({
rules : {
"code" : {
required : true,
number : true,//期望的是true,如果为false则展示提示信息
levelLimit : true//期望的是true,如果为false则展示提示信息
}
},
messages : {
"code" : {required : "请输入务编码！",
number : "请输入数字！"
}
},
errorPlacement: function( lable, element ){
element.ligerHideTip();
element.parent().ligerTip({ content: lable.html(), target: element[0] });
},
success : function( lable ){
lable.ligerHideTip();
lable.remove();
},
submitHandler: function(formTar){
var serialStr = $("#appEdit_Form").serialize();
var urlStr = './appIndex.htm?actionMethod=addAppInfo';
$.ajax({
type:'post',
url:urlStr,
data:serialStr,
success:function(redata){
if (redata ==1) {
alert( '操作成功!');
}else{
alert('失败提示', '操作失败!');
return;
}
}
});
}
});
});
//-->
</script>
</head>
<body >
<div class="right-body" >
<form method="post" action="javascript:void" id="appEdit_Form" >
<table style="width:400px;" border="0" cellpadding="0" cellspacing="0"
class="viewdatagrid">
<tbody>
<tr>
<th width="160">编码：</th>
<td width="0" ><input id="code" name="code" type="text" style="width: 240px" value="" level="2"/>
</td>
</tr>
</tbody>
</table>
<div class="btn-view-block">
<div class="toolbar">
<ul>
<li>
<a href="javascript:void 0;" class="save" id="appEdit_btok" name="appEdit_btok" ><span>保存</span></a>
</li>
<li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>
[html] view
plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<link href="../js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<!-- 引入JS库文件 -->
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="../js/tablecolor.js" type="text/javascript"></script>
<script src="../js/jquery-form/jquery.form.js" type="text/javascript"></script>
<script src="../js/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
<script src="../js/jquery-validation/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function() {
//保存
$("#appEdit_btok").click(function () {
$("#appEdit_Form").submit();
});
//自定义评语内容验证方法
jQuery.validator.addMethod("levelLimit",function(value, element){
var returnVal = false;
var level = $("#code").attr("level");
if(level=="1" || level=="0"){
returnVal = true;
}
return returnVal;
},"level不能为2!");
$("#appEdit_Form").validate({
rules : {
"code" : {
required : true,
number : true,//期望的是true,如果为false则展示提示信息
levelLimit : true//期望的是true,如果为false则展示提示信息
}
},
messages : {
"code" : {required : "请输入务编码！",
number : "请输入数字！"
}
},
errorPlacement: function( lable, element ){
element.ligerHideTip();
element.parent().ligerTip({ content: lable.html(), target: element[0] });
},
success : function( lable ){
lable.ligerHideTip();
lable.remove();
},
submitHandler: function(formTar){
var serialStr = $("#appEdit_Form").serialize();
var urlStr = './appIndex.htm?actionMethod=addAppInfo';
$.ajax({
type:'post',
url:urlStr,
data:serialStr,
success:function(redata){
if (redata ==1) {
alert( '操作成功!');
}else{
alert('失败提示', '操作失败!');
return;
}
}
});
}
});
});
//-->
</script>
</head>
<body >
<div class="right-body" >
<form method="post" action="javascript:void" id="appEdit_Form" >
<table style="width:400px;" border="0" cellpadding="0" cellspacing="0"
class="viewdatagrid">
<tbody>
<tr>
<th width="160">编码：</th>
<td width="0" ><input id="code" name="code" type="text" style="width: 240px" value="" level="2"/>
</td>
</tr>
</tbody>
</table>
<div class="btn-view-block">
<div class="toolbar">
<ul>
<li>
<a href="javascript:void 0;" class="save" id="appEdit_btok" name="appEdit_btok" ><span>保存</span></a>
</li>
<li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery转义
- JQuery easyui （1） Draggable（拖动）组件
- jquery $(document).ready() 与window.onload的区别
- jQuery---EasyUI小案列
- jQuery 从input中读取的内容的类型
- JQuery中全选与反选的
- jQuery操作Select
- 【探索】用js打语言包（使用jquery.i18n.properties）
- 【探索】用js打语言包（使用jquery.i18n.properties）
- jquery tmpl 详解
- Jquery页面中添加键盘按键事件，如ESC事件
- jquery-chosen 选择框插件
- 一个简单的jQuery插件ajaxfileuplo 4000 ad实现ajax上传文件例子
- jQuery垂直多级导航菜单代码分享
- jquery相册图片来回选择
- jQuery Lazy Load 图片延迟加载
- jquery入门
- jquery selector 基础
- jquery实现选项在两个下拉列表之间选择性移动的功能
- jquery实现文本框默认值功能