jQuery验证插件

原创 2014年12月03日 14:22:39
<!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" />
<title>注册表单验证</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jquery/reg/css/screen.css" />

<script src="../jquery/reg/js/jquery.js" type="text/javascript"></script>
<script src="../jquery/reg/js/jquery.validate.js" type="text/javascript"></script>

<script>

$.validator.setDefaults({
	submitHandler: function(form) { 
	alert("submitted!");
	form.submit();
	 }
});

$().ready(function (){
	
	//自行定义的验证方法
	jQuery.validator.addMethod("cardValidate",function(value, element, param) {
		//获取用户输入的值,判断是否为空
			if(value==""){
			  return false;	
			}
		
		return true;
	    } 
	);
	
	
	//自行定义的验证方法
	jQuery.validator.addMethod("cardLength",function(value, element, param) {
		//获取用户输入的值,长度是否等于15或者是18
		     
			if(value.length!=15&&value.length!=18){
			  alert(value.length);
			  return false;	
			}
		
		   return true;
	    } 
	);
	
	
	
	
   $("#form1").validate({
	   rules:{
				username:{
				  required:true,
				  minlength:6
				},
				user:{
				  required:true,
				  rangelength:[5,8]//将长度控制在一段长度
				},
				password:{
				  required:true,
				  rangelength:[6,12]
				  
				},
				repassword:{
				  required:true,
				  rangelength:[6,12],
				  equalTo:"#password"	//判断是否重复输入密码正确	  
				},
				sex:{
				  required:true,
				  minlength:1
				  
				},
				year:{
				  required:true,
				  range:[26,50]
				  
				},
				date:{
				   required:true,
				  dateISO:true
				  
				},
				email:{
					required:true,
					email:true
				},
				card:{
				  cardValidate:true,
				  rangelength:[15,18]
				}
				
	   
	   },
	   messages:{
		   
		   username:{
			  required:"用户名不能为空!",
			  minlength:"用户名长度不能小于6位"
			},
			user:{
			  required:"密码不能为空!",
			  rangelength:"登录名空,长度应该在5~8之间,可包含中文字符(一个汉字算一个字符)"			  
			},
			password:{
			  required:"密码不能为空!",
			  rangelength:"密码长度在6~12字符或数字,不能包含中文字符"			  
			},
			repassword:{
			  required:"密码不能为空!",
			  rangelength:"密码长度在6~12字符或数字,不能包含中文字符",
			  equalTo:"密码和重复密码内容不一致"
				  
			},
			sex:{
			  required:"用户名不能为空!",
			  minlength:"请选择性别"
			},
			year:{
			  required:"用户名不能为空!",
			  range:"员工的年龄只能在26~50之间"
			},
			date:{
			  required:"出生日期不能为空!",
			  dateISO:"请写入正确的日期格式"	
			},
			email:{
				required:"邮箱不能为空!",
				email:"请输入正确的邮箱格式"
			},
			card:{
			  cardValidate:"身份证号不能为空!",
			  rangelength:"身份证的长度15~18"
			}
			
		   
	     }
	   
	   
	});
	
});



</script>
</head>

<body>
<hr />
<form id="form1" action="" method="post">
员工信息录入
<hr />
<center>
<table border="1" bordercolor="#0033FF" >
<tr><td>
真实姓名(不能为空,没有其他要求):</td><td><input type="text" name="username" id="username" /></td></tr>
<tr><td>

登录名(登录名不能为空,长度应该在5~8之间,可包含中文字符(一个汉字算一个字符)):</td><td><input type="text" name="user" id="user" /></td></tr>
<tr><td>

密码(不能为空,长度在6~12字符或数字,不能包含中文字符):</td><td><input type="password" name="password" id="password" /></td></tr>
<tr><td>
重复密码(密码不能为空,长度在6~12字符或数字,不能包含中文字符):rangelength:[6,12]</td><td><input type="password" name="repassword" id="repassword" /><br>
</td></tr>
<tr><td>
性别(必选其一):</td><td><input type="radio" name="sex" id="sex"  value="man" />男
<input type="radio" name="sex" id="sex"  value="women" />女</td></tr>
<tr><td>年龄(必填 26~50)range:[26,50]</td><td><input type="text" id="year"  name="year"/></td></tr>
<tr><td>
你的学历:</td><td>
<select>
  <option>--请选择你的学历--</option>
  <option> 经济管理</option>
  <option>市场调查</option>
  <option>紧急策划</option>
  <option>市场营销</option>
  <option>外形设计</option>
</select>
</td></tr>

<tr><td>出生日期(1982/09/21):</td><td><input type="text" id="date"  name="date" /></td></tr>
<tr><td>兴趣爱好:</td><td>
<input type="checkbox" id="pingpang"  name="like"/>乒乓球
<input type="checkbox" id="yumao"  name="like"/>羽毛球
<input type="checkbox" id="shangwang"  name="like"/>上网
<input type="checkbox" id="lvyou"  name="like"/>旅游
<input type="checkbox" id="gouwu"  name="like"/>购物

</td></tr>
<tr><td>电子邮箱:email:true</td><td><input type="text" id="email"  name="email"/></td></tr>
<tr><td>身份证(15~18):</td><td><input type="text" id="card"  name="card" /></td></tr>
<tr><td></td><td style="float:right">
<input type="submit" value="保存" />
</td></tr></table></center>
</form>
</body>
</html>


10 款高质量的jQuery 表单验证插件

   本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间。     插件及展示如下: 1) A Jquery Inline Form Validation 2) Form Va...
  • geekone
  • geekone
  • 2011年06月28日 10:00
  • 259

jQuery - Validate插件为表单提供强大的验证功能

jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有...

jquery强大的表单验证插件

原文jquery强大的表单验证插件 中文汉化版,官方只有英文的。同时根据中国国情修改了部分验证规则。 这个插件支持大部分的浏览器,但由于有使用到了css3的阴影和圆角样式,所以在IE浏...

使用 jquery.validate.messages_cn.js 插件实现表单自动验证,出现中文乱码

jquery.validate.messages_cn.js 或者messages_zh.js 表单自动验证 中文乱码问题

百度谷歌唯一解决方案--解决jQuery Validation插件 相同名称文本框只验证第一个

百度和google了一下“Query Validation多个同名nameinput只能验证第一个”结果搜到满满的一屏显示度接近90%的文章,而且都没啥卵用,只能说遗憾, 除了改插件外,只能取巧了,...

asp.net mvc中很酷的jquery验证插件

代码:http://files.cnblogs.com/n-pei/ScaffoldingSample.rar 在看这篇文章之前,希望你能够先阅读下我将会使用得到jquery的插件作者博客:http...
  • educast
  • educast
  • 2012年02月01日 22:11
  • 754

Jquery表单验证插件–Validform:一行代码搞定整站的

你没看错,就一行代码搞定整站的表单验证!1 $(".demoform").Validform();为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执...

jquery,bootstrap数据验证插件bootstrapValidator

bootstrap:能够增加兼容性的强大框架.因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,...

jQuery formValidator表单验证插件

1.01版本 1、修改formValidator下的属性onvalid 增加2个参数,参数1:对象本身 参数2:值。主要是校验通过后,你还希望执行一些操作,你可以方便的取到对象和值 2、去掉In...

JQuery表单验证插件----validation

Mini-Web 帐号管理 $(document).ready(function() { //聚焦第一个输入框 $("#login...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery验证插件
举报原因:
原因补充:

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