1、官方表单验证资料
插件下载: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
插件文档:http://docs.jquery.com/Plugins/Validation
配置说明:http://docs.jquery.com/Plugins/Validation/validate#options
2、表单验证实例
实例一：精简验证，通过表单对象调用validate()方法进行验证，验证规则通过html标签属性定义：以下为常用属性定义距离
class='required' //必须字段
class='mail' //邮箱验证
class='url' //URL网址验证
class='date' //正确的日期 格式满足 2012，0204，2012-02-04
class='number' //输入合法的数字
class='digits' //输入整数
minlength='' //最小输入长度
maxlength='' //最长输入长度(该值不会提示，当值达到一定字符数不可再增长)
max='' //输入的数值小于指定值
min='' //输入的数值大于指定值
<!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>
<title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="messages_cn.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size:13px; }
input[type='text']{width:200px;}
textarea{width:155px;}
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form id="commentForm" method="get" action="" >
<fieldset>
<legend>表单验证</legend>
<p><label>Name</label><input name="name" class="required" maxlength="4" minlength="2" /></p>
<p><label >E-Mail</label><input name="email" class="required email" /></p>
<p><label >URL</label><input name="url" class="url"/></p>
<p><label>text</label><textarea name="text" cols="22" class="required"></textarea></p>
<p><input class="submit" type="submit" value="提交"/></p>
</fieldset>
</form>
</body>
</html>
实例二：方法验证，通过自定义表单规则来验证表单
<!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>
<title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="messages_cn.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size:13px; }
input[type='text']{width:200px;}
textarea{width:155px;}
.title{float:left;width:10em}
em.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
.field_notice{display:none;}
.checking{display:none;}
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate({
errorPlacement: function(error, element){
var error_td = element.next('em');
error_td.find('.field_notice').hide();
error_td.append(error);
},
success: function(label){
label.addClass('validate_right').text('OK!');
},
onkeyup: false,
rules: {
name: {
required:true,
minlength:3,
maxlength:40,
remote:{
url :'index.php?ajax=1',
type:'get',
data:{
name : function(){
return $('#name').val();
}
},
beforeSend:function(){
var _checking = $('#checking');
_checking.prev('.field_notice').hide();
_checking.next('label').hide();
$(_checking).show();
},
complete :function(){
$('#checking').hide();
}
}
},
email: {required: true, email: true },
url:{required:true,url:true},
text:"required"
},
messages: {
name: {required:"需要输入名称", minlength:"名称长度在3-40个字符之间", maxlength:"名称长度在3-40个字符之间",remote:"用户名已存在"},
email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"},
url: {required:"需要输入URL地址", url:"URL地址格式不正确"},
text:"需要输入文本内容"
},
});
});
</script>
</head>
<body>
<form id="commentForm" method="get" action="" >
<fieldset>
<legend>表单验证</legend>
<p><label class="title" >Name</label><input id="name" name="name"/>
<em><label class="field_notice"></label><label id="checking" class="checking">检查中...</label></em>
</p>
<p><label class="title" >E-Mail</label><input name="email"/>
<em><label class="field_notice"></label></em>
</p>
<p><label class="title" >URL</label><input name="url"/>
<em><label class="field_notice"></label></em>
</p>
<p><label class="title" >text</label><textarea name="text" cols="22"></textarea>
<em><label class="field_notice"></label></em>
</p>
<p><input class="submit" type="submit" value="提交"/></p>
</fieldset>
</form>
</body>
</html>
代码下载：jquery-validation.zipjQuery表单验证插件 --jQuery Validati大屏查看
发布于：2015年05月23日
已被阅读次
- 最新发布
- linux下svn提交忽略某些文件... (173)
- 使用批处理来批量更新、提交SVN... (135)
- linux查看目录文件大小命令 (144)
- linux tar打包压缩排除某个... (133)
- Linux tar压缩和解压 (191)
- SVN子命令add用法浅析 (129)
- 热门博文
- 网友FBI探案：马蓉iPad惊人发现... (43342)
- 霍金携手俄罗斯富豪耗资1亿美元寻找外... (4746)
- 如何才能查看PHP内置函数源代码... (1208)
- 微信支付开发当前URL未注册的解决方... (573)
- 《谁为爱情买单》中的经典面试 ... (440)
- 让虚拟主机也用上SVN：适用于个人的... (394)
- 精华博文
- [推荐]Centos7 安装配置 SVN (156)
- easyswoole框架安装 (173)
- php开启pecl的支持(推荐) (156)
- 1-10个恋爱表现：男朋友爱你程度到... (163)
- 女生喜欢你的10个程度，到第六个就可... (140)
- Eclipse 没有Server选项... (211)
- 友情链接
- 我来忙 (110)