java網(wǎng)上圖書商城(1)User模塊
本文實(shí)例為大家分享了java網(wǎng)上圖書商城user模塊代碼,供大家參考,具體內(nèi)容如下
效果圖:
regist.js
$(function() { /* * 1. 得到所有的錯(cuò)誤信息,循環(huán)遍歷之。調(diào)用一個(gè)方法來確定是否顯示錯(cuò)誤信息! */ $(".errorClass").each(function() { showError($(this));//遍歷每個(gè)元素,使用每個(gè)元素來調(diào)用showError方法 }); /* * 2. 切換注冊按鈕的圖片 */ $("#submitBtn").hover( function() { $("#submitBtn").attr("src", "/goods/images/regist2.jpg"); }, function() { $("#submitBtn").attr("src", "/goods/images/regist1.jpg"); } ); /* * 3. 輸入框得到焦點(diǎn)隱藏錯(cuò)誤信息 */ $(".inputClass").focus(function() { var labelId = $(this).attr("id") + "Error";//通過輸入框找到對應(yīng)的label的id $("#" + labelId).text("");//把label的內(nèi)容清空! showError($("#" + labelId));//隱藏沒有信息的label }); /* * 4. 輸入框失去焦點(diǎn)進(jìn)行校驗(yàn) */ $(".inputClass").blur(function() { var id = $(this).attr("id");//獲取當(dāng)前輸入框的id var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到對應(yīng)的校驗(yàn)函數(shù)名 eval(funName);//執(zhí)行函數(shù)調(diào)用 }); /* * 5. 表單提交時(shí)進(jìn)行校驗(yàn) */ $("#registForm").submit(function() { var bool = true;//表示校驗(yàn)通過 if(!validateLoginname()) { bool = false; } if(!validateLoginpass()) { bool = false; } if(!validateReloginpass()) { bool = false; } if(!validateEmail()) { bool = false; } if(!validateVerifyCode()) { bool = false; } return bool; }); }); /* * 登錄名校驗(yàn)方法 */ function validateLoginname() { var id = "loginname"; var value = $("#" + id).val();//獲取輸入框內(nèi)容 /* * 1. 非空校驗(yàn) */ if(!value) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("用戶名不能為空!"); showError($("#" + id + "Error")); return false; } /* * 2. 長度校驗(yàn) */ if(value.length < 3 || value.length > 20) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("用戶名長度必須在3 ~ 20之間!"); showError($("#" + id + "Error")); false; } /* * 3. 是否注冊校驗(yàn) */ $.ajax({ url:"/goods/UserServlet",//要請求的servlet data:{method:"ajaxValidateLoginname", loginname:value},//給服務(wù)器的參數(shù) type:"POST", dataType:"json", async:false,//是否異步請求,如果是異步,那么不會等服務(wù)器返回,我們這個(gè)函數(shù)就向下運(yùn)行了。 cache:false, success:function(result) { if(!result) {//如果校驗(yàn)失敗 $("#" + id + "Error").text("用戶名已被注冊!"); showError($("#" + id + "Error")); return false; } } }); return true; } /* * 登錄密碼校驗(yàn)方法 */ function validateLoginpass() { var id = "loginpass"; var value = $("#" + id).val();//獲取輸入框內(nèi)容 /* * 1. 非空校驗(yàn) */ if(!value) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("密碼不能為空!"); showError($("#" + id + "Error")); return false; } /* * 2. 長度校驗(yàn) */ if(value.length < 3 || value.length > 20) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("密碼長度必須在3 ~ 20之間!"); showError($("#" + id + "Error")); false; } return true; } /* * 確認(rèn)密碼校驗(yàn)方法 */ function validateReloginpass() { var id = "reloginpass"; var value = $("#" + id).val();//獲取輸入框內(nèi)容 /* * 1. 非空校驗(yàn) */ if(!value) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("確認(rèn)密碼不能為空!"); showError($("#" + id + "Error")); return false; } /* * 2. 兩次輸入是否一致校驗(yàn) */ if(value != $("#loginpass").val()) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("兩次輸入不一致!"); showError($("#" + id + "Error")); false; } return true; } /* * Email校驗(yàn)方法 */ function validateEmail() { var id = "email"; var value = $("#" + id).val();//獲取輸入框內(nèi)容 /* * 1. 非空校驗(yàn) */ if(!value) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("Email不能為空!"); showError($("#" + id + "Error")); return false; } /* * 2. Email格式校驗(yàn) */ if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("錯(cuò)誤的Email格式!"); showError($("#" + id + "Error")); false; } /* * 3. 是否注冊校驗(yàn) */ $.ajax({ url:"/goods/UserServlet",//要請求的servlet data:{method:"ajaxValidateEmail", email:value},//給服務(wù)器的參數(shù) type:"POST", dataType:"json", async:false,//是否異步請求,如果是異步,那么不會等服務(wù)器返回,我們這個(gè)函數(shù)就向下運(yùn)行了。 cache:false, success:function(result) { if(!result) {//如果校驗(yàn)失敗 $("#" + id + "Error").text("Email已被注冊!"); showError($("#" + id + "Error")); return false; } } }); return true; } /* * 驗(yàn)證碼校驗(yàn)方法 */ function validateVerifyCode() { var id = "verifyCode"; var value = $("#" + id).val();//獲取輸入框內(nèi)容 /* * 1. 非空校驗(yàn) */ if(!value) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("驗(yàn)證碼不能為空!"); showError($("#" + id + "Error")); return false; } /* * 2. 長度校驗(yàn) */ if(value.length != 4) { /* * 獲取對應(yīng)的label * 添加錯(cuò)誤信息 * 顯示label */ $("#" + id + "Error").text("錯(cuò)誤的驗(yàn)證碼!"); showError($("#" + id + "Error")); false; } /* * 3. 是否正確 */ $.ajax({ url:"/goods/UserServlet",//要請求的servlet data:{method:"ajaxValidateVerifyCode", verifyCode:value},//給服務(wù)器的參數(shù) type:"POST", dataType:"json", async:false,//是否異步請求,如果是異步,那么不會等服務(wù)器返回,我們這個(gè)函數(shù)就向下運(yùn)行了。 cache:false, success:function(result) { if(!result) {//如果校驗(yàn)失敗 $("#" + id + "Error").text("驗(yàn)證碼錯(cuò)誤!"); showError($("#" + id + "Error")); return false; } } }); return true; } /* * 判斷當(dāng)前元素是否存在內(nèi)容,如果存在顯示,不頁面不顯示! */ function showError(ele) { var text = ele.text();//獲取元素的內(nèi)容 if(!text) {//如果沒有內(nèi)容 ele.css("display", "none");//隱藏元素 } else {//如果有內(nèi)容 ele.css("display", "");//顯示元素 } } /* * 換一張驗(yàn)證碼 */ function _hyz() { /* * 1. 獲取<img>元素 * 2. 重新設(shè)置它的src * 3. 使用毫秒來添加參數(shù) */ $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime()); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
SpringMVC REST風(fēng)格深入詳細(xì)講解
這篇文章主要介紹了SpringMVC REST風(fēng)格,Rest全稱為Representational State Transfer,翻譯為表現(xiàn)形式狀態(tài)轉(zhuǎn)換,它是一種軟件架構(gòu)2022-10-10mybatis設(shè)置sql執(zhí)行時(shí)間超時(shí)時(shí)間的方法
本文主要介紹了mybatis設(shè)置sql執(zhí)行時(shí)間超時(shí)時(shí)間的方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02基于java語言實(shí)現(xiàn)快遞系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于java語言實(shí)現(xiàn)快遞系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03SpringBoot集成PostgreSQL并設(shè)置最大連接數(shù)
本文主要介紹了SpringBoot集成PostgreSQL并設(shè)置最大連接數(shù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11Spring調(diào)度框架EnableScheduling&Scheduled源碼解析
這篇文章主要介紹了Spring調(diào)度框架EnableScheduling&Scheduled源碼解析,@EnableScheduling&Scheduled定時(shí)調(diào)度框架,本著不僅知其然還要知其所以然的指導(dǎo)思想,下面對該調(diào)度框架進(jìn)行源碼解析,以便更好的理解其執(zhí)行過程,需要的朋友可以參考下2024-01-01