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

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.