给jQuery Validate添加一个好看点的提示框。

最新推荐文章于 2018-08-19 22:41:42 发布

superxielei

最新推荐文章于 2018-08-19 22:41:42 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript jquery 文章标签： jquery validate ViewUI

本文链接：https://blog.youkuaiyun.com/superxielei/article/details/84266250

javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

本文介绍了一种使用 jQuery 插件实现表单验证的方法，并详细展示了如何自定义错误提示的位置与样式，包括如何设置提示框的位置使其居中于输入框上方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弄个箭头是不是会更好？如果只有一层结构，那么箭头只能用背景图实现，但是我又不想用图片，没想到办法~有高人帮忙写一写看看。

$(form).validate({
				errorElement:'div',
				errorPlacement: function(error, element) {
					error.addClass('tooltip tooltip-inner');
					element.after(error);
					var pos = $.extend({}, element.offset(), {
						width: element.outerWidth()
					  , height: element.outerHeight()
					  }),
					  actualWidth = error.outerWidth(),
					  actualHeight = error.outerHeight();
					error.css({display:'block',opacity:'0.8',top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2});
				},
				highlight: function(element, errorClass) {
					//高亮显示
					$(element).addClass(errorClass);
					$(element).parents('li:first').children('label').addClass(errorClass);
				},
				unhighlight:function(element, errorClass){
					$(element).removeClass(errorClass);
					$(element).parents('li:first').children('label').removeClass(errorClass);
				}
			});

.tooltip {
  position: absolute;
  z-index: 1020;
  display: block;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  opacity: 0;
  filter: alpha(opacity=0);
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

form input.error{
	color:#F00;
	border: 1px solid #CE7979;
	background:#FFF7FA;
}
form label.error{
	color:#F00;
}