談談開心王國的使用者註冊頁面

2022-01-17 11:49:59 字數 1648 閱讀 5884

話說:熟能生巧。同一件事情,做一次,和做十次,的確是有很大不同,就拿這兩天做的這個註冊頁面來說吧,明顯比之前的要好用很多。

比如說之前,填寫了使用者名稱之後,不能馬上與伺服器互動,檢測使用者名稱是否被占用,現在通過事件onblur呼叫函式checkuser(),從而可以馬上檢測出使用者名稱是否被占用。

比如說之前,使用者每乙個資訊輸入完,不能馬上給出是否輸入正確的提示,現在也通過這個方法,可以給與提示。

比如說之前,如果驗證碼輸入的不正確,那麼頁面提交之後,之前輸入的密碼等資訊會丟失,需要使用者重新填寫,現在不用了,驗證碼輸入不正確,那重新填寫驗證碼就是了,幹嘛要重新填寫密碼呢,你說是吧。(,我沒說你呀,別對號入座,嘿嘿)

頁面肯定是要引入jquery.validate,這裡毋庸置疑,引用這個外掛程式後,使用者在提交時,以及在輸入時,會初步檢測輸入的合法性,這個外掛程式想必大家已經很熟了,就不再多說了。

再者就是使用onblur事件,每一行資訊填寫完成後,就觸發該事件,並針對相關資訊給出提示,比如使用者名稱是否占用,密碼強度是否足夠等等,這些jquery.validate無法完成的事情,還有一點,就是該行資訊檢測通過後要給出正確提示,鼓勵使用者進一步操作,這點jquery.validate外掛程式也是無法實現,我們可以通過這個事件,給頁面控制項賦值,示例**如下。

而最關鍵的,校驗驗證碼則是乙個難題,如果採用普通的頁面提交到後台,那因為password控制項的特殊性,從後台返回之前輸入的值到頁面上時,密碼控制項的值必定清零,具體請見註冊頁面。並且在返回的過程中,還有其他一些問題,比如之前的驗證提示丟失,頁面重新整理等等問題。

我這裡是這麼解決的。

在頁面提交事件中,通過ajax獲取當然驗證碼的值,與輸入框的值比如,如果正確,進行下一步,如果錯誤,給與提示,截斷頁面繼續提交。

而讓頁面預設不提交,先檢測驗證碼是否是正確。

關鍵**1:onsubmit = "return false;" 

關鍵**2:

view code

function

formsubmit()

$.ajax(,

//要傳送的資料

}

至此,乙個個人認為小有成就的註冊頁面,就此完成,當然些頁面也不算完美,若是有人有更好的解決辦法,還請不吝賜教,多多指導。

最後給與示例**:

這個**叫《開心王國》哦,如果覺得還不錯,請分享給您的家人和朋友,在此謝過了。

談談開放平台

那麼這裡,我們就來談談這個所謂的開放平台。1.什麼是開放平台 首先,讓我們來了解下什麼是開放平台。也許對於程式設計師來說,有乙個概念一定不陌生,open api,對,就是開放的應用程式介面。那麼開放平台呢?我們不要把他想的那麼神秘,簡單來說就是open api platform,那麼什麼是platf...

談談開發人員自測 黑盒測試

上週部門主管,給我們培訓了在開發過程中關於自測的話題,自測到底怎麼去測,測試力度到底多大?下面給大家分享下培訓內容,往大家吐槽。單元測試 指對軟體中的最小可測試單元進行檢查和驗證 功能測試 對產品的各功能進行驗證,根據功能 測試用例 逐項測試,檢查產品是否達到使用者要求的功能 整合測試 也叫 組裝測...

前端隨心記 談談開發的工作規範

網際網路上很多的大公司,會指定很多的規範,約束這種開發的隨意性。1.開發cs命名規範 header content footer 2.目錄規範 assets 靜態資源 img css jsstatic css img js問題 assets 與 static 的區別?答 css 是存在預處理語言 s...