现在位置首页 / 项目实战 /正文

jquery验证插件:jquery.validate完整规则说明及使用demo(1)

作者: IT小兵 | 2015年8月14日| 热度:℃ | 评论: |参与:

作为jquery经典的验证插件jquery.validate使用的非常普遍。今天就整理一下关于jquery.validate的使用说明,并分享一个demo。

demo地址:http://bbbzd.com/code/jquery_validate/ 

效果图:

html代码:

<head>
<include file="Common/Header" />
<meta charset="utf-8">
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
 
<form class="form-horizontal" id="form" onsubmit="return false;">
  <input type="text" name="password_old" class="form-control required" id="password_old" maxlength="20">
  <input type="password" name="pay_password" class="form-control required" id="pay_password">
  <input type="password" name="password_Repeat" class="form-control required" id="password_Repeat">
 
  <button type="submit" id="submit" class="btn btn-success btn-padding-lr-30 margin-right-15">确定</button>
</form>
</body>

js代码:

<!------------------------------------------------------------------------->
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="messages_cn.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//提交
	$('#submit').click(function(){
		var pay_password = $('#pay_password').val();
		var password_Repeat = $('#password_Repeat').val();
		var password_old = $('#password_old').val();	
		var data = {
				'pay_password':pay_password,
				'password_Repeat':password_Repeat,
				'password_old':password_old
		};
		console.info(data);
		 var v = $('#form').validate({
  			rules : {
   				pay_password : {
    			required : true,
    			minlength : 6,
    			ismypassword : true
   				},
   				password_Repeat : {
    			required : true,
    			minlength : 6,
    			ismypassword : true
   				},
				password_old : {
    			required : true,
    			minlength : 6,
   				}
  			},
  			messages : {
   				pay_password : {
    			required : "请输入密码",
    			minlength : "字符长度不能小于6个字符",
    			ismypassword : "密码必须由数字、英文字母和特殊字符(!,.@#$%^&*?_~)组成"
   				},
   				password_Repeat : {
    			required : "请输入密码",
    			minlength : "字符长度不能小于6个字符",
    			ismypassword : "密码必须由数字、英文字母和特殊字符(!,.@#$%^&*?_~)组成"
   				},
				password_old : {
    			required : "请输入密码",
    			minlength : "字符长度不能小于6个字符",
   				},
  			}
 		 });
 		 
 		 if(pay_password != password_Repeat){
 		 	alert("密码不一致,请重新输入确认!");return false;
 		 }
		 //---------------------------------
		 if(!v.form())return false;
			$.ajax({
				url:'{:U("Merchant/ajax_pw")}',
				data: data,
				beforeSend:function(){
				},
				success:function(res){		
						if(res == 1){
							alert("密码修改成功");
							}
						if(res == 0){
							alert("两次密码一样,未做修改");
							}	
						if(res != 0 && res != 1){
							alert(res);
							}	
				}
			});
			//------------------------
});
})
</script>

中文规则js:

jQuery.extend(jQuery.validator.messages, {
    required: "必选字段",
	remote: "请修正该字段",
	email: "请输入正确格式的电子邮件",
	url: "请输入合法的网址",
	date: "请输入合法的日期",
	dateISO: "请输入合法的日期 (ISO).",
	number: "请输入合法的数字",
	digits: "只能输入整数",
	creditcard: "请输入合法的信用卡号",
	equalTo: "请再次输入相同的值",
	accept: "请输入拥有合法后缀名的字符串",
	maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
	minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
	rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
	range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
	max: jQuery.validator.format("请输入一个最大为{0} 的值"),
	min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

详细说明:

下载地址

jquery.validate插件的文档地址
http://docs.jquery.com/Plugins/Validation

jquery.validate插件的主页
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jquery.validate插件主页上提供的demo
http://jquery.bassistance.de/validate/demo/

验证规则

下面是默认校验规则,也可以自定义规则

 (1)required:true 必输字段

(2)remote:"check.php" 使用ajax方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期

(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性

(7)number:true 必须输入合法的数字(负数,小数)

(8)digits:true 必须输入整数

(9)creditcard: 必须输入合法的信用卡号

(10)equalTo:"#field" 输入值必须和#field相同

(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)

(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(15)range:[5,10] 输入值必须介于 5 和 10 之间

(16)max:5 输入值不能大于5(17)min:10 输入值不能小于10


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询