Functions:
1. tooltip
2. Validate Form Verification
Independent use
You can leave a row empty.CodeYou only need to set verification rules.
Www.25175.net
In fact, garden already has many validation plug-ins Based on jquery, such as: http://www.cnblogs.com/wzmaodong/archive/2008/05/21/1203962.html
However, I feel that it is too troublesome to use it. To implement the verification of a large number of forms, there are a lot of JavaScript code. Therefore, the design principle here is convenient to use, easy to maintain, and highly adaptable.
The user-defined regular expression is used for verification, which makes it very convenient to use.
1. Instant Form Verification and prompt
2. Verify when submitting the form
The following describes how to implement convenient prompt and form verification functions in Asp.net.
Code
< Li >
< Label > Flight No. </ Label >
< ASP: textbox ID = "_ Flightno" Runat = "Server" Reg = "\ W {2} \ D {4 }" Tip = "Set flight number (uppercase )" Toupper = "True" />
</ Li >
< Li >
< Label > Airline Division (2-Word Code) </ Label >
< ASP: textbox ID = "_ Airline" Runat = "Server" Reg = "\ W {2 }" Toupper = "True" /> (Uppercase)
</ Li >
< Li >
< Label > Departure time </ Label >
< ASP: textbox ID = "_ Beingtime" Runat = "Server" Reg = "\ D {4 }" Tip = "Set the departure time format: hhmm" /> (Format: hhmm)
</ Li >
The above implementation is not very convenient. You can easily implement verification and prompt functions without writing a bunch of JavaScript logic code.
Call $ (document). Ready (function () {jquery ('input [tip], input [Reg] '). tooltip ({Onsubmit: True}). The data verification and prompt functions are completed. (The call has been integrated in tooltip. js)
Onsubmit: True. Here, it sets whether to trigger the onsubmit submission verification event.
Let's look at the implementation of CSS.
. Tooltipinputerr
{} {
Padding:2px 0 2px 18px;
Border:Solid 1px red;
Background:# Ffff99 URL (/images/exclamation.png) No-repeat 2px Center;
}
. Tooltipinputok
{} {
Padding:2px 0 2px 18px;
Border:Solid 1px green;
Background:URL (/images/accept.png) No-repeat 2px Center;
}
. Tooltipshowpanel
{} {
Z-Index : Auto ;
Display : None ;
Position : Absolute ;
Width : 276px ;
Height : 35px ;
Overflow : Hidden ;
Text-indent : 5px ;
Line-height : 40px ;
Font-size : 12px ;
Font-family : Arial ;
Background : URL (/images/tooltop.gif) No-repeat left top ;
Opacity : 0.9 ;
Filter : Alpha (opacity = 90) ;
}
Usage:
I.
Download jquery
Download jquery 1.2.6 (16 KB, minified and gzipped) Great for production use.
Download jquery 1.2.6 (97kb, uncompressed) Great for testing, learning and development.
Download jquery 1.2.6 (30kb, packed) for those that can't gzip their JavaScript.
2. Add the above style and reference the tooltip. JS File
Tooltip. Pack. js |
1kb |
0 |
2008/8/6 22:41:16 |
Tooltip. Mini. js |
1kb |
0 |
22:41:11 |
Tooltip. js |
3kb |
0 |
2008/8/6 22:41:04 |
Complete demo downloadJquery-tooltip.rar
Select demo supportedJquery-tooltip_select.rar