jQuery标签式表单验证提示（警告）信息

最新推荐文章于 2023-04-21 17:24:52 发布

VIP文章 taijiedi13

最新推荐文章于 2023-04-21 17:24:52 发布

阅读量4.5k

点赞数 1

分类专栏： Web前端文章标签： jQuery 表单验证提示 JavaScript

本文链接：https://blog.csdn.net/taijiedi13/article/details/38405009

版权

最近做项目时遇到表单设计紧凑，每项后面没有多余的位置留给提示信息，打算使用标签的方式显示在input等的右上方。

思路：

1.插入，通过提示对象使用.after()方法将提示div插入到页面，可使用html()动态插入。

2.定位，提示div使用绝对定位，通过提示对象（input或者select等）的距离浏览器边框的距离计算位置，然后设定提示div相对浏览器边框距离。

3.在提示对象获得焦点时再将提示div隐藏。

源码：

<!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>
<script src="file:///D|/jQuery_test/jquery-1.11.1.min.js"></script>
<style>
#div1{
	width:200px;
	height:150px;
	margin-top:200px;
	margin-left:200px;
	}
input{
	margin-top:10px;
	width:200px;
	height:30px;
	}
/*验证标签式提示信息样式*/
.form