Home > Others

Using jquery to implement Intelligent form verification features _jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First show you the following form effect diagram, the specific effect is as follows:

1. The front desk begins with jquery, first with HTML tags:

<body>
<form id= "Form1" runat= "Server" >
<table class= "tble" >
<tr><td class= "TD1" > Username <input type= "text" class= "TD"/></td></tr> <TR><TD "class="
> Password <input type= "text" class= "TD"/></td></tr>
<TR><TD class= "TD3" > Mailbox <input type= " Text "class=" TD "/></td></tr>
<TR><TD class=" td4 "> Confirm password <input type=" text "class=" TD "/></td></tr>
<tr><td><input class=" btton1 "type=" button "value=" Submit "/>< /td><td><input class= "Btton2" type= "reset" value= "reset"/></td></tr>
</table>
</form>
</body>

2, and then the CSS code:

<style type= "Text/css" >
tble
{
font-size:14px;
Text-align:right;
Position:absolute;
left:550px;
top:150px
}
. TD
{
border:2px #CCCCCC solid
}
. Btton1
{
position:absolute;
left:65px
}
. Btton2
{
position:absolute;
left:110px
}
. Span
{
color: #cccccc;
font-size:14px;
Text-align:right
}
. SpanPwd2
{
color:red
}
. SPANPWD3
{
color:red
}
. SpanPwd4
{
color:red
}
. SpanPwd5
{
color:green
}
. SpanPwd6
{
color:red;
}
</style>

3. jquery support files need to be introduced before writing jquery code:

<script src= "Jquery-1.4.1.min.js" type= "Text/javascript" ></script>

4. Start writing jquery code now:

<script type= "Text/javascript" > $ (function () {getstyle ();
GetPassword ();
Getemail (); function GetStyle () {$ ("INPUT.TD"). focus (function () {//=================== password style processing =================================
= = $ (this). CSS ("Border", "2px #00ccff solid");
var span = "&LT;TD class= ' span ' ><span> Please enter password </span></td>";
$ (this). Parent (), parent (). Find ("Td.td2"). After (span);
$ (this). Parent (). Parent (). Find ("Td.spanpwd2"). Remove ();
$ (this). Parent (). Parent (). Find ("TD.SPANPWD3"). Remove ();
$ (this). Parent (). Parent (). Find ("Td.spanpwd4"). Remove ();
$ (this). Parent (). Parent (). Find ("Td.spanpwd5"). Remove (); ==================================================================//================ mailbox Style processing ===================
=========== $ (this). CSS ("Border", "2px #00ccff solid");
var spanemail = "<td class= ' span ' ><span> Please enter the correct email address </span></td>";
$ (this). Parent (), parent (). Find ("Td.td3"). After (Spanemail);
$ (this). Parent (). Parent (). Find ("Td.spanpwd6"). Remove (); $ (this). Parent (). Parent (). Find ("Td.spanpwd5"). Remove ();
=================== User name Style processing ======================== $ (this). CSS ("Border", "2px #00ccff solid");
var spanemail = "<td class= ' span ' ><span> Please enter the correct username </span></td>";
$ (this). Parent (), parent (). Find ("TD.TD1"). After (Spanemail);
$ (this). Parent (). Parent (). Find ("Td.spanpwd6"). Remove ();
$ (this). Parent (). Parent (). Find ("Td.spanpwd5"). Remove (); })//================ Confirm password Verification ================================//non-NULL verify//Confirm password consistency with original password validation function GetPassword () {$ ("
Input.td "). blur (function () {//================ password Authentication =================================//Non-null Authentication if ($ (this). val () =" ") {
$ (this). CSS ("Border", "2px red Solid");
$ (this). Parent (). Parent (). Find ("Td.span"). Remove ();
var span = "<td class= ' spanPwd2 ' ><span> password cannot be empty!</span></td>";
$ (this). Parent (), parent (). Find ("Td.td2"). After (span);
return false; }//Password length verification else if ($ (this). Val (). length < 6 | | $ (this). Val (). length > A {$ (this). CSS ("Border", "2px Red Solid")
;$ (this). Parent (). Parent (). Find ("Td.span"). Remove ();
var span = "<td class= ' spanPwd3 ' ><span> password length must be between 6 digits to 12 bits!</span></td>";
$ (this). Parent (), parent (). Find ("Td.td2"). After (span);
return false; //If the password is not a number else if (isNaN (). val ()) = = = True) {$ (this). CSS ("Border", "2px Red Solid"), $ (this). Parent (). Parent () fi
nd ("Td.span"). Remove ();
var span = "<td class= ' spanPwd4 ' ><span> password must be digital!</span></td>";
$ (this). Parent (), parent (). Find ("Td.td2"). After (span);
return false; else {//password format through $ (this). CSS ("Border", "2px #cccccc solid"), $ (this). Parent (). (). ("Td.span"). Remove (); var
span = "<td class= ' spanPwd5 ' ><span> password format via!</span></td>";
$ (this). Parent (), parent (). Find ("Td.td2"). After (span);
return true;
}
}); //===================== Mailbox Authentication start ======================== function Getemail () {$ (. td3 input). blur (function () {var Patten = new RegExp (/^[\w-]+ \.[ \w-]+) *@ ([\w-]+\.)
+[a-za-z]+$/); Non-null authentication if ($ (". TD3 input"). Val () = = "") {$ (this). CSS ("Border", "2px red Solid");
$ (this). Parent (). Parent (). Find ("Td.span"). Remove ();
var spanxemail = "<td class= ' spanPwd6 ' ><span> mailbox cannot be empty!</span></td>";
$ (this). Parent (), parent (). Find ("Td.td3"). After (Spanxemail);
return false; }//Mailbox format Verification else if (Patten.test (". TD3 input"). val ()) = = False) {$ (this). CSS ("Border", "2px red Solid"); $ (this). Parent (
). Parent (). Find ("Td.span"). Remove ();
var span = "<td class= ' spanPwd4 ' ><span> e-mail format is incorrect, please fill in!</span></td> again";
$ (this). Parent (), parent (). Find ("Td.td3"). After (span);
return false; else {//mailbox format via $ (this). CSS ("Border", "2px #cccccc solid"), $ (this). Parent (). Parent (). Find ("Td.span"). Remove (); var
Spanemail = "<td class= ' spanPwd5 ' ><span> mailbox format through!</span></td>";
$ (this). Parent (), parent (). Find ("Td.td3"). After (Spanemail);
return true;
}
}); //========================== Mailbox Authentication End ============================//================ user name Verification ======================== ========= functionGetUserName () {$ (". TD1 input"). blur (function () {//Non-null authentication if ($ (this). val = = "") {$ (this). CSS ("Border", "2px red Solid");
$ (this). Parent (). Parent (). Find ("Td.span"). Remove ();
var span = "<td class= ' spanPwd6 ' ><span> username mailbox cannot be empty!</span></td>";
$ (this). Parent (), parent (). Find ("TD.TD1"). After (span);
return false; //user name length validation else if (this). Length < 4 | | $ (this). length > {$ (this). CSS ("Border", "2px red Solid");
Parent (). Parent (). Find ("Td.span"). Remove ();
var spanxemail = "<td class= ' spanPwd6 ' ><span> username format is not correct, can only enter 4-20 characters!</span></td>";
$ (this). Parent (), parent (). Find ("TD.TD1"). After (Spanxemail);
return false;
}//Username format validation through else {$ (this). CSS ("Border", "2px #cccccc solid"), $ (this). Parent (). Parent (). Find ("Td.span"). Remove ();
var spanusername = "<td class= ' spanPwd5 ' ><span> username format via!</span></td>";
$ (this). Parent (), parent (). Find ("Td.td3"). After (Spanusername);
return true;
}
}); //======================== Click on the button and suitInteroperability Verification ============== $ ("tr TD Input.btton1"). Click (function () {if (GetUserName () && getemail () && GETPA ssWOrd ()) {var userName = $ ("TD.TD1 input"). Val ()//username var userpwd = $ ("TD.TD2 input"). val ();//password var userrepass = $ ( "Td.td3 input"). Val (); Confirm password var email = $ ("td.td4 input"). Val ();
Mailbox Getajax (UserName, userpwd, userrepass, email);
}
}); function Getajax (UserName, userpwd, Userrepass, email) {var json = [{UserName]: userName, "userpwd": Userpwd, "Userrepa
SS ": Userrepass," email ": email}]; $.post ("processresult.aspx?jon=" + JSON, function (data) {if (data = = "false") {alert ("Duplicate user name, please re-enter!");} else if (data
= = "OK") {alert ("Registration successful!");} else {alert ("Sorry, your input is incorrect, please check the input");})
}
}); </script>

5, to achieve the following effects:


I did not realize the background of jquery verification, the next opportunity to make up, the first written here, only to achieve the effect of pure front-end.

About the use of jquery to implement the Intelligent form verification function of the relevant knowledge to introduce you here, I hope to help you!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More