关于jQuery.validate验证框架整合css样式的问题

最新推荐文章于 2019-08-08 17:23:29 发布

hollowJ

最新推荐文章于 2019-08-08 17:23:29 发布

阅读量814

点赞数

分类专栏： jQuery web 文章标签： jQuery bootstrap 表单

本文链接：https://blog.csdn.net/hcysoul/article/details/38060091

版权

web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

 jQuery-validate 验证框架的功能强大，但是样式却不怎么好看那么怎么来改变样式 与其他的ui库整合呢？我用的bootstrap来演示。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
<link rel="stylesheet" href="zh/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#form1").validate(
		{
			
		debug:true,
		errorClass:"help-inline",//<span style="color:#ff0000;">因为jQuery validate的errorclass默认为error，而bootstrap的是help-inline，所以改成bootstrap的</span>
		errorElement:"span",//<span style="color:#ff0000;"><span style="font-family: Arial, Helvetica, sans-serif;">jQuery validate的errorElement默认为label,bootstrap为span ，改</span></span>

		success:function(element){//<span style="color:#ff0000;">验证成功触发此事件，将输入框的父div加上success的class</span>
			$(element).parent().addClass("success");
			$("<span class='help-inline'>ok</span>").appendTo($(element));
		},
		highlight:function(element){//<span style="color:#ff0000;">验证不对的时候触发</span>
			if(!$(element).parent().hasClass("error")){
				$(element).parent().addClass("error");
			}
			if($(element).parent().hasClass("success")){
				$(element).parent().removeClass("success");
			}
		

		},
		rules:{ 
			username:{
				required:true,
				maxlength:10,
				minlength:5
			}
			
		},
		messages:{
			username:{
				required:"此处为必填项",
				maxlength:$.validator.format("输入字符不得超过{0}个"),
				minlength:$.validator.format("输入字符不得超过{0}个")
			}
			
		}
		}
		)
		
		
	})
	
	
</script>
</head>
<body>
<form class="form" id="form1">
	<div  class="control-group"><input type="text" name="username"></div>
	<div class="control-group"><input type="text" name="password"></div>
	<div class="control-group"><input type="text" name="repassword"></div>
<input type="submit" value="提交">
</form>
</body>
</html

红字是需要注意的地方，搞清楚改的地方，那么什么css框架或者自定义的样式都是可以整合的