关闭

jquery invalidation插件

标签: webjquery表单
339人阅读 评论(0) 收藏 举报
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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:98531次
    • 积分:1906
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:22篇
    • 译文:0篇
    • 评论:6条
    文章分类
    最新评论