How to Use jquery in Asp.net to implement convenient prompt and form verification functions

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