jquery invalidation插件

原创 2015年07月09日 20:47:54
jquery invalidation 是一款简单易用的客户端验证表单的组建。需要引入这两个文件

代码如下:

	<script src="js/jquery-1.10.0.js"></script>
	<script src="js/jquery.validate-1.13.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var validator;
			validator = $("#form1").validate({
				debug:true,
				rules:{
					username:{
						required:true,
						//email:true
						//minlength:2,
						//maxlength:10,
						//rangelength:[2,10],
						//number:true(可以是小数,负数等)
						//digits:true(只能是整数)
						//date:true,
						//dateISO:true,(更加严格)
						//min:2,
						//max:10
						//remote:"remote.json"
						// remote:{
						// 	url:"remote.json",
						// 	type:"post",
						// 	data:{
						// 		logintime:function(){
						// 			return +new date;
						// 		}
						// 	}
						// }
					},
					password:{
						required:true,
						//minlength:5,
						maxlength:16
					},
					"confirm-password":{
						equalTo:"#password"
					}
				},
				messages:{
					username:{
						required:"请输入用户名",
						//minlength:"最小长度为2",
						//maxlength:"最大长度为10",
						rangelength:"用户名应该在2-10位"
						//remote:"用户名不存在"
						//min:"数字应该>2"
					},
					password:{
						required:"请输入密码",
						minlength:"最小长度为5",
						maxlength:"最大长度为16"
					},
					"confirm-password":{
						equalTo:"两次密码不一致"
					}
				},	

				//通过表单验证后执行的函数,比如说通过ajax把数据存到数据库
				submitHandler:function(form){
					console.log($("form").serialize());
				},	

				//表单未通过验证时,自带静态函数
				invalidHandler:function(event,validator){
					console.log("错误数:"+validator.numberOfInvalids());
				},
				//设置忽略掉的验证,填写选择器
				ignore:"#username",		
			});

			$("#check").click(function(event) {
				//只要有错误信息就是填写错误
				alert($("#form1").valid() ? "验证成功":"验证失败");
			});

			//批量添加校验规则通过class
			$.validator.addClassRules({
				txt:{
					minlength:5
				}
			});
		});
	</script>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

分享9个单页面网站开发必备jQuery插件

日期:2012-7-25  来源:GBin1.com 单页面网站作为简单快捷,易于维护的页面设计方案,越来越受到工作室,作品集,或者个人博客类网站用户的青睐,我们可以使用不同的特效来使得页面更加的丰...
  • jjfat
  • jjfat
  • 2012年07月25日 12:26
  • 918

jquery封装插件的方法

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery....
  • osdfhv
  • osdfhv
  • 2016年11月16日 14:02
  • 2020

jquery弹出框插件--jqModal

jqModal是jquery弹窗插件,个人觉得jqModal强大方便,在此做记录以备忘。 登录jqModal主页http://dev.iceburg.net/jquery/jqModal/index...

15款JQuery图片展示效果插件

15款JQuery图片展示效果插件 作者:果果  在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,...
  • wyy20
  • wyy20
  • 2013年05月12日 11:30
  • 650

table合并单元格(Jquery 插件)

一个列表中有很多公共信息重复出现,看上去比较繁琐。在不不改动后台数据结构的情况下,改下一下前端代码把table 中的重复项合并单元格。   实现代码参考如下: 首先要导入: ...

16 款基于jQuery的图片缩放效果插件推荐

jQuery很强大,你可以使用它来实现任何你想要实现的效果。今天为大家推荐一些图像缩放效果插件。 1. Zoomer Gallery 该插件可以将你的图片列表转换成漂亮的画廊,这个画廊...

JQuery日期插件datepicker的使用

JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活。下面做一个使用日期插件datapicker的例子。...

jQuery DataTables插件分页允许输入页码跳转

项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找相应的解决...
  • alanzyy
  • alanzyy
  • 2016年12月27日 15:58
  • 3308

jQuery插件的写法以及使用

如今做web开发,jquery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用。最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 (f...

利用jquery插件中的拖拽与放置实现的相册效果,可以删除和恢复

该效果为官方提供,本人只是进行了一下翻译,加了些详细注释供大家参考,对大家有帮助就ok了,如有解释错误谢谢提出。 以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢: j...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery invalidation插件
举报原因:
原因补充:

(最多只允许输入30个字)