我給你個例子吧:編寫一個註冊頁。簡而言之就是個 form 表單,從上到下分別是使用者名稱、密碼、暱稱、註冊郵箱等文字框,最下面是個提交按鈕。簡單吧?我們加個小需求:給文字框加上資料校驗功能。校驗方式總共有三種:1,透過正則表示式限制能輸入的字元和長度,比如使用者名稱不能超過 15 字元,只能輸入英語數字下劃線。輸別的輸不進去。2,同步校驗。在文字框的 blur 事件中執行,用來校驗資料格式,比如郵箱是否合法,或者任意欄位不能為空。如果不合法,文字框右端打叉並寫明原因。3,非同步校驗,透過 ajax 向後臺校驗資料合法性,比如使用者名稱、暱稱和郵箱不能重複(你可以用setTimeout模擬)。如果不合法,文字框右端同樣右端打叉寫明原因。各種校驗有先後順序,比如同步校驗先執行,驗證透過再執行非同步校驗。注意兩種情況:第一,當用戶點選提交的時候,由於某些欄位文字框可能根本沒有 focus 過,所以 blur 事件也沒有,於是沒被校驗過。此時需要補充校驗,透過之後方可提交。第二,當用戶點選提交的時候,非同步校驗可能還在執行沒得到結果,此時你有兩種選擇,要麼需要等待結果,透過之後方可提交。要麼直接提交接收後臺錯誤資訊,彈框顯示。我建議你試試第一種,以及,校驗超時怎麼辦?其實就是一個普通的簡化版註冊頁,各個網站都有這麼一套流程。老掉牙的東西。你如果能用 jquery 把這套邏輯非常清晰的實現出來,清晰到看到程式碼就能口述出我剛才講的這些需求,分門別類,條理清楚,扔給誰都可以隨時維護,並且沒有 bug。那麼你可以說基本具備了編寫網站前端的基本功了。
我給你個例子吧:編寫一個註冊頁。簡而言之就是個 form 表單,從上到下分別是使用者名稱、密碼、暱稱、註冊郵箱等文字框,最下面是個提交按鈕。簡單吧?我們加個小需求:給文字框加上資料校驗功能。校驗方式總共有三種:1,透過正則表示式限制能輸入的字元和長度,比如使用者名稱不能超過 15 字元,只能輸入英語數字下劃線。輸別的輸不進去。2,同步校驗。在文字框的 blur 事件中執行,用來校驗資料格式,比如郵箱是否合法,或者任意欄位不能為空。如果不合法,文字框右端打叉並寫明原因。3,非同步校驗,透過 ajax 向後臺校驗資料合法性,比如使用者名稱、暱稱和郵箱不能重複(你可以用setTimeout模擬)。如果不合法,文字框右端同樣右端打叉寫明原因。各種校驗有先後順序,比如同步校驗先執行,驗證透過再執行非同步校驗。注意兩種情況:第一,當用戶點選提交的時候,由於某些欄位文字框可能根本沒有 focus 過,所以 blur 事件也沒有,於是沒被校驗過。此時需要補充校驗,透過之後方可提交。第二,當用戶點選提交的時候,非同步校驗可能還在執行沒得到結果,此時你有兩種選擇,要麼需要等待結果,透過之後方可提交。要麼直接提交接收後臺錯誤資訊,彈框顯示。我建議你試試第一種,以及,校驗超時怎麼辦?其實就是一個普通的簡化版註冊頁,各個網站都有這麼一套流程。老掉牙的東西。你如果能用 jquery 把這套邏輯非常清晰的實現出來,清晰到看到程式碼就能口述出我剛才講的這些需求,分門別類,條理清楚,扔給誰都可以隨時維護,並且沒有 bug。那麼你可以說基本具備了編寫網站前端的基本功了。