This article has shared the user module code of Java Online Bookstore for your reference. The specific content is as follows
Reproduction image:
register.js
$(function() { /* * 1. Get all the error messages and loop over them. Call a method to determine whether the error message is displayed! */ $(".errorClass").each(function() { showError($(this));//Transfer each element and use each element to call the showError method}); /* * 2. Toggle the image of the registration button*/ $("#submitBtn").hover( function() { $("#submitBtn").attr("src", "/goods/images/regist2.jpg"); }, function() { $("#submitBtn").attr("src", "/goods/images/regist1.jpg"); } ); /* * 3. The input box gets the focus hidden error message*/ $(".inputClass").focus(function() { var labelId = $(this).attr("id") + "Error";//Find the corresponding label id through the input box $("#" + labelId).text("");//Clear the content of the label! showError($("#" + labelId));//Hide label without information }); /* * 4. The input box loses focus and checks*/ $(".inputClass").blur(function() { var id = $(this).attr("id");//Get the id of the current input box var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//Get the corresponding verification function name eval(funName);//Execute function call}); /* * 5. Verify when submitting the form*/ $("#registForm").submit(function() { var bool = true;//Indicate that the verification passes if(!validateLoginname()) { bool = false; } if(!validateLoginpass()) { bool = false; } if(!validateReloginpass()) { bool = false; } if(!validateEmail()) { bool = false; } if(!validateVerifyCode()) { bool = false; } return bool; });});/* * Login name verification method*/function validateLoginname() { var id = "loginname"; var value = $("#" + id).val();//Get the input box content/* * 1. Non-empty verification*/ if(!value) { /* * Get the corresponding label * Add error message* Show label */ $("#" + id + "Error").text("Username cannot be empty! "); showError($("#" + id + "Error")); return false; } /* * 2. Length check*/ if(value.length < 3 || value.length > 20) { /* * Get the corresponding label * Add error message * Show label */ $("#" + id + "Error").text("The username length must be between 3 and 20!"); showError($("#" + id + "Error")); false; } /* * 3. Register check*/ $.ajax({ url:"/goods/UserServlet",//The servlet to be requested data:{method:"ajaxValidateLoginname", loginname:value},//The parameters to the server:"POST", dataType:"json", async:false,//Whether the request is asynchronous, if it is asynchronous, then we will not wait for the server to return, and our function will run downward. cache:false, success:function(result) { if(!result) {//If the verification fails $("#" + id + "Error").text("User name has been registered!"); showError($("#" + id + "Error")); return false; } } } }); return true;}/* * Login password verification method*/function validateLoginpass() { var id = "loginpass"; var value = $("#" + id).val();//get input box content/* * 1. Non-empty verification*/ if(!value) { /* * Get the corresponding label * Add error message* Show label */ $("#" + id + "Error").text("Password cannot be empty!"); showError($("#" + id + "Error")); return false; } /* * 2. Length verification*/ if(value.length < 3 || value.length > 20) { /* * Get the corresponding label * Add error message * Show label */ $("#" + id + "Error").text("Password length must be between 3 and 20! "); showError($("#" + id + "Error")); false; } return true; }/* * Confirm password verification method*/function validateReloginpass() { var id = "reloginpass"; var value = $("#" + id).val();//Get the input box content/* * 1. Non-empty verification*/ if(!value) { /* * Get the corresponding label * Add error message* Show label */ $("#" + id + "Error").text("Confirm the password cannot be empty!"); showError($("#" + id + "Error")); return false; } /* * 2. Check whether the two inputs are consistent*/ if(value != $("#loginpass").val()) { /* * Get the corresponding label * Add error message* Show label */ $("#" + id + "Error").text("The two inputs are inconsistent!"); showError($("#" + id + "Error")); false; } return true; }/* * Email verification method*/function validateEmail() { var id = "email"; var value = $("#" + id).val();//get the input box content/* * 1. Non-null check*/ if(!value) { /* * Get the corresponding label * Add error message* Show label */ $("#" + id + "Error").text("Email cannot be empty!"); showError($("#" + id + "Error")); return false; } /* * 2. Email format check*/ if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) { /* * Get the corresponding label * Add error message* Show label */ $("#" + id + "Error").text("Error Email format!"); showError($("#" + id + "Error")); false; } /* * 3. Register and verify*/ $.ajax({ url:"/goods/UserServlet",//The servlet to be requested data:{method:"ajaxValidateEmail", email:value},//The parameters to the server:"POST", dataType:"json", async:false,//Whether the request is asynchronous, if it is asynchronous, then we will not wait for the server to return, and our function will run downward. cache:false, success:function(result) { if(!result) {//If the verification fails $("#" + id + "Error").text("Email has been registered!"); showError($("#" + id + "Error")); return false; } } }); return true; }/* * Verification code verification method*/function validateVerifyCode() { var id = "verifyCode"; var value = $("#" + id).val();//Get the input box content/* * 1. Non-empty verification*/ if(!value) { /* * Get the corresponding label * Add error message * Show label */ $("#" + id + "Error").text("Verification code cannot be empty!"); showError($("#" + id + "Error")); return false; } /* * 2. Length check*/ if(value.length != 4) { /* * Get the corresponding label * Add error message * Show label */ $("#" + id + "Error").text("Wrong verification code!"); showError($("#" + id + "Error")); false; } /* * 3. Is it correct*/ $.ajax({ url:"/goods/UserServlet",//The servlet to be requested data:{method:"ajaxValidateVerifyCode", verifyCode:value},//The parameters to the server:"POST", dataType:"json", async:false,//Whether the request is asynchronous, if it is asynchronous, then we will not wait for the server to return, and our function will run downward. cache:false, success:function(result) { if(!result) {//If the verification fails $("#" + id + "Error").text("Verification code error!"); showError($("#" + id + "Error")); return false; } } }); return true; }/* * Determine whether the current element has content. If it exists, the page will not be displayed! */function showError(ele) { var text = ele.text();//get the content of the element if(!text) {//If there is no content ele.css("display", "none");//Hide the element} else {//If there is content ele.css("display", "");//Show the element}}/* * Change a verification code*/function _hyz() { /* * 1. Get the <img> element* 2. Reset its src * 3. Use milliseconds to add the parameter*/ $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());}The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.