Javaweb Online book store complete project--day02-6.ajax check function page implementation

Tag: On () decision to execute false span picture name inconsistent cache

1, now we want to implement Ajax in the Regist.js function, the use of user name to the background query whether to register, the mailbox is registered to the background, the verification code is the correct function

Let's see Regist.js's code.

//This function will call $ (function () after the HTML document is loaded .{/** Variable all error message, call a method to decide whether to display error message **/$ (". Errorclass"). each (function () {ShowError ($ (this)),//$ (this) represents the currently traversed object}); Toggle the Register button's picture $ ("#submitBtn"). Hover (function (){//Get cursor Focus $ ("#submitBtn"). attr ("src", "/goods/images/regist2.jpg"); }, function (){//Lose focus of the cursor $ ("#submitBtn"). attr ("src", "/goods/images/regist1.jpg"); }); Hides the contents of the label tag $ (". Inputclass") When the input box gets focus. focus (function (){//First get the label tag ID var inputid = $ (this). attr ("id");        var labelid = inputid+ "Error";//label ID//Clear the contents of the tag $ ("#" +labelid). Text ("");    Let the label not show ShowError ($ ("#" +labelid)); }); When the input box loses focus, we need to verify the input data effectively, such as whether the telephone number is legal, the mailbox is legal $ (". Inputclass"). blur (function (){//First judge the current is that input box is called var inputID = $ (this). attr ("id");        //;        Call the corresponding checksum method var functionname = "Validate" +inputid;//get the validation function that needs to be called, if the ID is loginname, the Validateloginname () function is called to verify Switch (functionname) {case "Validateloginname":Validateloginname ();Break ; Case "Validateloginpass":Validateloginpass ();Break ; Case "Validatereloginrepass":Validatereloginrepass ();Break ; Case "Validateemail":Validateemail ();Break ; Case "Validateverifycode":Validateverifycode ();Break ; Default: Break; }    }); Checks the form's submission for $ ("#registForm"). Submit (function (){if (! Validateloginname ()) {return false; }if (! Validateloginpass ()){return false; }if (! Validatereloginrepass ()){return false; }if (! Validateemail ()){return false; }if (! Validateverifycode ()){return false; }return true;        }); });//legitimacy Check function validateloginname () for the user name entered{//Get the contents of the input box var content = $ ("#loginname"). Val (); The non-null check if (!content) {//content is empty and the following label is displayed as $ ("#loginnameError"). Text ("Username cannot be empty!")        ");        Display Label ShowError ($ ("#loginnameError")); return false;//No subsequent statements are executed}//Length check if (content.length <2 | | content.length>20){//content is empty, the following label is displayed in $ ("#loginnameError"). Text ("The length of the user name must be between 2-20!")        ");        Display Label ShowError ($ ("#loginnameError")); return false;//No subsequent statements are executed}// whether already registered checksum//using AJAX to the backend server to verify the $.ajax ({//equals HTTP:///goods/userservlet?method=validateloginname&loginname=content URL: "/goods/userservlet", Data:{meth OD: "Validateloginname", Loginname:content},//Where method refers to the way to access the Userservlet;        Type: "POST", DataType: "JSON", Async:false,//Select synchronization here, if the selection of asynchronous operation has not been to the server to complete the results, directly returned the result is true Cache:false, Success:function (Result){if (result) {//content is empty, the following label is displayed as $ ("#loginnameError"). Text ("User name already registered");                Display Label ShowError ($ ("#loginnameError")); return false;//No subsequent statements are executed}        }            }); return true;} Check function Validateloginpass () for the password entered{//Get the contents of the input box var content = $ ("#loginpass"). Val (); The non-null check if (!content) {//content is empty and the following label is displayed as $ ("#loginpassError"). Text ("Password cannot be empty!")        ");        Display Label ShowError ($ ("#loginpassError")); return false;//No subsequent statements are executed}//Length check if (content.length <3 | | content.length>20){//content is empty, the following label is displayed in $ ("#loginpassError"). Text ("The length of the password must be between 3-20!")        ");        Display Label ShowError ($ ("#loginpassError")); return false;//No subsequent statements are executed}return true;} Check function Validatereloginrepass () for the confirmed password entered{//Get the contents of the input box var content = $ ("#reloginrepass"). Val (); The non-null check if (!content) {//content is empty and the following label is displayed as $ ("#reloginrepassError"). Text ("Password cannot be empty!")        ");        Display Label ShowError ($ ("#reloginrepassError")); return false;//No subsequent statements are executed}//Determine if the contents of the two-time input are consistent if (content! = $ ("#loginpass"). Val ()){//content is empty, and the following label is displayed in $ ("#reloginrepassError"). Text ("Two password input inconsistent!");        Display Label ShowError ($ ("#reloginrepassError")); return false;//No subsequent statements are executed}return true; }//check function Validateemail () for the e-mail address entered{//Get the contents of the input box var content = $ ("#email"). Val (); The non-null check if (!content) {//content is empty and the following label is displayed as $ ("#emailError"). Text ("Mailbox cannot be empty!")        ");        Display Label ShowError ($ ("#emailError")); return false;//No subsequent statements are executed}//Determine if the input mailbox format is correct if (!/^ ([a-za-z0-9_-]) [email protected] ([a-za-z0-9_-]) + ((\.[ A-za-z0-9_-]{2,3}){ the}) $/.test (content)){//content is empty, the following label is displayed in $ ("#emailError"). Text ("Mailbox format is incorrect!");        Display Label ShowError ($ ("#emailError")); return false;//No subsequent statements are executed}//To the backend server to check if the mailbox is already registered //using AJAX to the backend server to verify the $.ajax ( { URL:"/goods/userservlet", Data:{method: "Validateemail", Email:content},//Where method        Refers to the method that is to be accessed in the Userservlet;        Type: "POST", DataType: "JSON", Async:false,//Select synchronization here, if the selection of asynchronous operation has not been to the server to complete the results, directly returned the result is true Cache:false, Success:function (Result){ if (result) {//content is empty, the following label is displayed $ ("#ema                Ilerror "). Text (" The mailbox has been registered ");                Display Label ShowError ($ ("#emailError")); return false;//No subsequent statements are executed }        }            }); return true;} Check function Validateverifycode () for the address entered{//Get the contents of the input box var content = $ ("#verifyCode"). Val (); The non-null check if (!content) {//content is empty and the following label is displayed as $ ("#verifyCodeError"). Text ("Captcha cannot be empty!")        ");        Display Label ShowError ($ ("#verifyCodeError")); return false;//No subsequent statements are executed}//The length of the verification code must be 4 if (content.length! = 4){//content is empty, the following label is displayed in $ ("#verifyCodeError"). Text ("The CAPTCHA is incorrect!");        Display Label ShowError ($ ("#verifyCodeError")); return false;//No subsequent statements are executed}//To the background verify that the verification code is correct//use AJAX to the backend server to verify the $.ajax ( { URL:"/goods/userservlet", Data:{method: "Validateverifycode", Verifycode:content},        Where method refers to the way to access the Userservlet;        Type: "POST", DataType: "JSON", Async:false,//Select synchronization here, if the selection of asynchronous operation has not been to the server to complete the results, directly returned the result is true Cache:false, Success:function (Result){ if (!result) {//content is empty, the following label is displayed $ ("#ve                Rifycodeerror "). Text (" The CAPTCHA is incorrect! ");                Display Label ShowError ($ ("#verifyCodeError")); return false;//No subsequent statements are executed }        }            }); return true;} Determines whether the current element has content, exists display, does not exist do not show function ShowError (ele){var text = Ele.text ();//Gets the text value of the object if (!text) {ele.css ("display", "none");//Let the object message}Else{ele.css ("Display", "");//Display Object}}//Implementation of the verification code picture switching functions Function Changeverifycode (){$ ("#imgVerifyCode"). attr ("src", "/goods/verifycodeservlet?a=" +new Date (). GetTime ());}

Javaweb Online Book Mall complete Project--day02-6.ajax verification function page implementation