本文實例為大家分享了java網上圖書商城user模塊代碼，供大家參考，具體內容如下
效果圖：
regist.js
$(function() { /* * 1. 得到所有的錯誤信息，循環遍歷之。調用一個方法來確定是否顯示錯誤信息！ */ $(".errorClass").each(function() { showError($(this));//遍歷每個元素，使用每個元素來調用showError方法}); /* * 2. 切換註冊按鈕的圖片*/ $("#submitBtn").hover( function() { $("#submitBtn").attr("src", "/goods/images/regist2.jpg"); }, function() { $("#submitBtn").attr("src", "/goods/images/regist1.jpg"); } ); /* * 3. 輸入框得到焦點隱藏錯誤信息*/ $(".inputClass").focus(function() { var labelId = $(this).attr("id") + "Error";//通過輸入框找到對應的label的id $("#" + labelId).text("");//把label的內容清空！ showError($("#" + labelId));//隱藏沒有信息的label }); /* * 4. 輸入框失去焦點進行校驗*/ $(".inputClass").blur(function() { var id = $(this).attr("id");//獲取當前輸入框的id var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到對應的校驗函數名eval(funName);//執行函數調用}); /* * 5. 表單提交時進行校驗*/ $("#registForm").submit(function() { var bool = true;//表示校驗通過if(!validateLoginname()) { bool = false; } if(!validateLoginpass()) { bool = false; } if(!validateReloginpass()) { bool = false; } if(!validateEmail()) { bool = false; } if(!validateVerifyCode()) { bool = false; } return bool; });});/* * 登錄名校驗方法*/function validateLoginname() { var id = "loginname"; var value = $("#" + id).val();//獲取輸入框內容/* * 1. 非空校驗*/ if(!value) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("用戶名不能為空！ "); showError($("#" + id + "Error")); return false; } /* * 2. 長度校驗*/ if(value.length < 3 || value.length > 20) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("用戶名長度必須在3 ~ 20之間！"); showError($("#" + id + "Error")); false; } /* * 3. 是否註冊校驗*/ $.ajax({ url:"/goods/UserServlet",//要請求的servlet data:{method:"ajaxValidateLoginname", loginname:value},//給服務器的參數type:"POST", dataType:"json", async:false,//是否異步請求，如果是異步，那麼不會等服務器返回，我們這個函數就向下運行了。 cache:false, success:function(result) { if(!result) {//如果校驗失敗$("#" + id + "Error").text("用戶名已被註冊！"); showError($("#" + id + "Error")); return false; } } }); return true;}/* * 登錄密碼校驗方法*/function validateLoginpass() { var id = "loginpass"; var value = $("#" + id).val();//獲取輸入框內容/* * 1. 非空校驗*/ if(!value) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("密碼不能為空！"); showError($("#" + id + "Error")); return false; } /* * 2. 長度校驗*/ if(value.length < 3 || value.length > 20) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("密碼長度必須在3 ~ 20之間！ "); showError($("#" + id + "Error")); false; } return true; }/* * 確認密碼校驗方法*/function validateReloginpass() { var id = "reloginpass"; var value = $("#" + id).val();//獲取輸入框內容/* * 1. 非空校驗*/ if(!value) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("確認密碼不能為空！"); showError($("#" + id + "Error")); return false; } /* * 2. 兩次輸入是否一致校驗*/ if(value != $("#loginpass").val()) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("兩次輸入不一致！"); showError($("#" + id + "Error")); false; } return true; }/* * Email校驗方法*/function validateEmail() { var id = "email"; var value = $("#" + id).val();//獲取輸入框內容/* * 1. 非空校驗*/ if(!value) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("Email不能為空！"); showError($("#" + id + "Error")); return false; } /* * 2. Email格式校驗*/ if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("錯誤的Email格式！"); showError($("#" + id + "Error")); false; } /* * 3. 是否註冊校驗*/ $.ajax({ url:"/goods/UserServlet",//要請求的servlet data:{method:"ajaxValidateEmail", email:value},//給服務器的參數type:"POST", dataType:"json", async:false,//是否異步請求，如果是異步，那麼不會等服務器返回，我們這個函數就向下運行了。 cache:false, success:function(result) { if(!result) {//如果校驗失敗$("#" + id + "Error").text("Email已被註冊！"); showError($("#" + id + "Error")); return false; } } }); return true; }/* * 驗證碼校驗方法*/function validateVerifyCode() { var id = "verifyCode"; var value = $("#" + id).val();//獲取輸入框內容/* * 1. 非空校驗*/ if(!value) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("驗證碼不能為空！"); showError($("#" + id + "Error")); return false; } /* * 2. 長度校驗*/ if(value.length != 4) { /* * 獲取對應的label * 添加錯誤信息* 顯示label */ $("#" + id + "Error").text("錯誤的驗證碼！"); showError($("#" + id + "Error")); false; } /* * 3. 是否正確*/ $.ajax({ url:"/goods/UserServlet",//要請求的servlet data:{method:"ajaxValidateVerifyCode", verifyCode:value},//給服務器的參數type:"POST", dataType:"json", async:false,//是否異步請求，如果是異步，那麼不會等服務器返回，我們這個函數就向下運行了。 cache:false, success:function(result) { if(!result) {//如果校驗失敗$("#" + id + "Error").text("驗證碼錯誤！"); showError($("#" + id + "Error")); return false; } } }); return true; }/* * 判斷當前元素是否存在內容，如果存在顯示，不頁面不顯示！ */function showError(ele) { var text = ele.text();//獲取元素的內容if(!text) {//如果沒有內容ele.css("display", "none");//隱藏元素} else {//如果有內容ele.css("display", "");//顯示元素}}/* * 換一張驗證碼*/function _hyz() { /* * 1. 獲取<img>元素* 2. 重新設置它的src * 3. 使用毫秒來添加參數*/ $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。