Home > Developer > JavaScript
Use JQuery to implement smart form verification.
The following table is displayed:
1. JQuery is used at the beginning of the foreground. The HTML Tag is displayed first:
<Body> <form id = "form1" runat = "server"> <table class = "tble"> <tr> <td class = "td1"> User Name <input type = "text" class = "td"/> </td> </tr> <td class = "td2"> password <input type = "text" class =" td "/> </td> </tr> <td class =" td3 "> email <input type =" text "class =" td "/> </ td> </tr> <td class = "td4"> confirm the password <input type = "text" class = "td"/> </td> </tr> <tr> <td> <input class = "btton1" type = "button" value = "Submit"/> </td> <input class = "btton2" type = "reset" value = "reset"/> </td> </tr> </table> </form> </body>
2, followed by 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. before writing JQUery code, introduce the JQuery support file:
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
4. Now write JQuery code:
<Script type = "text/javascript"> $ (function () {GetStyle (); GetPassword (); GetEmail (); function GetStyle () {$ ("input. td "). focus (function () {// loads ("border", "2px #00 ccff solid "); var span = "<td class = 'span '> <span> enter the 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 (); // ================================================ ==========================================/// configure ("border ", "2px #00 ccff solid"); var spanEmail = "<td class = 'span '> <span> enter the correct email address </span> </td> "; $ (thi S ). parent (). parent (). find ("td. td3 "). after (spanEmail); $ (this ). parent (). parent (). find ("td. spanPwd6 "). remove (); $ (this ). parent (). parent (). find ("td. spanPwd5 "). remove (); // resolve ("border", "2px #00 ccff solid "); var spanEmail = "<td class = 'span '> <span> enter the correct user name </span> </td>"; $ (this ). parent (). parent (). find ("td. td1 "). after (spanEmail); $ (this ). parent (). paren T (). find ("td. spanPwd6 "). remove (); $ (this ). parent (). parent (). find ("td. spanPwd5 "). remove ();})} // ========================== confirm the password verification ========================= ==================/// non-empty verification // verify the consistency between the password and the original password function GetPassword () {$ ("input. td "). blur (function () {// =========================== password verification ========================== ====================/// if ($ (this ). val () = "") specify values (this).css ("border", "2px red solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); Var span = "<td class = 'spanpwd2 '> <span> the password cannot be blank! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td2 "). after (span); return false;} // password length verification else if ($ (this ). val (). length <6 | $ (this ). val (). length> 12) specify values (this).css ("border", "2px red solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var span = "<td class = 'spanpwd3 '> <span> the password length must be between 6 and 12 characters! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td2 "). after (span); return false;} // if the password is not a number else if (isNaN ($ (this ). val () = true) specify values (this).css ("border", "2px red solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var span = "<td class = 'spanpwd4 '> <span> the password must be a number! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td2 "). after (span); return false;} else {// The password format passes through the authorization (this).css ("border", "2px # cccccc solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var span = "<td class = 'spanpwd5 '> <span> password format passed! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td2 "). after (span); return true ;}});} // =================================== start of email verification ====================== =========== function GetEmail () {$ (". td3 input "). blur (function () {var patten = new RegExp (/^ [\ w-] + (\. [\ w-] +) * @ ([\ w-] + \.) + [a-zA-Z] + $/); // if ($ (". td3 input "). val () = "") specify values (this).css ("border", "2px red solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var spanxEm Ail = "<td class = 'spanpwd6 '> <span> the email address cannot be blank! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td3 "). after (spanxEmail); return false;} // The else if (patten. test ($ (". td3 input "). val () = false) specify values (this).css ("border", "2px red solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var span = "<td class = 'spanpwd4 '> <span> the email address format is incorrect. Please enter it again! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td3 "). after (span); return false;} else {// The Box format is passed through (this).css ("border", "2px # cccccc solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var spanEmail = "<td class = 'spanpwd5 '> <span> email format passed! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td3 "). after (spanEmail); return true ;}});} /// ===================================== email verification completion ========== ====================================================== user name verification = ================================== function GetUserName () {$ (". td1 input "). blur (function () {// non-empty verification if ($ (this ). val = "") specify values (this).css ("border", "2px red solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var span = "<td Class = 'spanpwd6 '> <span> the user name mailbox cannot be blank! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td1 "). after (span); return false;} // verify else if ($ (this) for username length ). length <4 | $ (this ). length> 20) specify values (this).css ("border", "2px red solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var spanxEmail = "<td class = 'spanpwd6 '> <span> the user name format is incorrect. Only 4-20 characters can be entered! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td1 "). after (spanxEmail); return false;} // The username format is verified by else authentication certificate (this).css ("border", "2px # cccccc solid"); $ (this ). parent (). parent (). find ("td. span "). remove (); var spanUserName = "<td class = 'spanpwd5 '> <span> User Name format passed! </Span> </td> "; $ (this ). parent (). parent (). find ("td. td3 "). after (spanUserName); return true ;}});} // ====================================== click the button to authenticate with the server ============ =======$ ("tr td input. btton1 "). click (function () {if (GetUserName () & GetEmail () & GetPassword () {var userName = $ ("td. td1 input "). val (); // user name var userPwd = $ ("td. td2 input "). val (); // password var userRepass = $ ("td. td3 input "). val (); // confirm the password var email = $ ("td. td4 inpu T "). val (); // email GetAjax (userName, userPwd, userRepass, email) ;}}); function GetAjax (userName, userPwd, userRepass, email) {var json = [{"userName": userName, "userPwd": userPwd, "userRepass": userRepass, "email": email}]; $. post ("ProcessResult. aspx? Jon = "+ json, function (data) {if (data =" false ") {alert (" the user name already exists. Please try again! ");} Else if (data =" OK ") {alert (" registered successfully! ") ;}Else {alert (" sorry, your input is incorrect. Please check the input ") ;}}}); </script>
5. achieve the following results:
I didn't implement the background JQuery verification. I will have the opportunity to add it together next time. This time I will write it here, only to achieve the pure front-end effect.
This article describes how to use JQuery to implement the smart form verification function. I hope it will be helpful to you!
Articles you may be interested in:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
