Home > Developer > JavaScript
Implement smart Form Verification Based on jquery, and implement smart forms using jquery
Many website registration modules can check whether the format is correct in real time, which greatly enhances the user experience and is very beneficial to development.
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. 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 spanxEmail = "<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!
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
