PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程教案任務(wù)5-1-注冊(cè)表單的數(shù)據(jù)驗(yàn)證

1、PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程教案任務(wù)5-1-注冊(cè)表單的數(shù)據(jù)驗(yàn)證PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程教案任務(wù)5-1-注冊(cè)表單的數(shù)據(jù)驗(yàn)證PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程教案任務(wù)5-1-注冊(cè)表單的數(shù)據(jù)驗(yàn)證5-1 注冊(cè)表單的數(shù)據(jù)驗(yàn)證課程內(nèi)容信息說(shuō)明所屬任務(wù)任務(wù)五 郵箱注冊(cè)和登錄功能實(shí)現(xiàn)已有基礎(chǔ)（學(xué)情）課前預(yù)習(xí)已經(jīng)完成了郵箱注冊(cè)界面的設(shè)計(jì)和簡(jiǎn)單注冊(cè)數(shù)據(jù)的提交，為表單數(shù)據(jù)合法性驗(yàn)證準(zhǔn)備了操作平臺(tái)。教學(xué)目標(biāo)知識(shí)目標(biāo)1.理解表單數(shù)據(jù)合法性驗(yàn)證的重要性2.掌握使用正則表達(dá)式完成注冊(cè)表單數(shù)據(jù)驗(yàn)證的方法3.掌握使用js函數(shù)完成兩次密碼的一致性判斷的方法能力目標(biāo)1.能按照要求完成表單數(shù)據(jù)驗(yàn)證，確保提交數(shù)據(jù)的合法性2.拓展數(shù)據(jù)驗(yàn)證的更多方法，

2、培養(yǎng)舉一反三的創(chuàng)新思維和創(chuàng)新設(shè)計(jì)能力素質(zhì)目標(biāo)（包含課程思政）1.針對(duì)網(wǎng)站中不規(guī)范的數(shù)據(jù)填寫(xiě)，培養(yǎng)精益求精的工匠精神2.養(yǎng)成代碼規(guī)范習(xí)慣重點(diǎn)1.理解數(shù)據(jù)驗(yàn)證的重要性2.使用HTML5正則表達(dá)式完成郵件地址、密碼和手機(jī)號(hào)的數(shù)據(jù)驗(yàn)證3.使用js函數(shù)完成密碼和確認(rèn)密碼一致性判斷難點(diǎn)1.如何根據(jù)不同需求設(shè)計(jì)符合要求的正則表達(dá)式2.數(shù)據(jù)校驗(yàn)中函數(shù)內(nèi)部和外部的return false各自有什么作用？教學(xué)策略信息化手段動(dòng)畫(huà)展示數(shù)據(jù)驗(yàn)證的重要性及return false和return true的不同效果教學(xué)方法討論法、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、講授法學(xué)習(xí)方法課前預(yù)習(xí)、課中探究、課后練習(xí)與拓展課前活動(dòng)及需要時(shí)間教師活動(dòng)

3、及內(nèi)容學(xué)生活動(dòng)及內(nèi)容1.布置學(xué)生觀看如下視頻，設(shè)計(jì)翻轉(zhuǎn)課堂問(wèn)題，安排預(yù)習(xí)作業(yè)（圖片驗(yàn)證碼預(yù)習(xí)作業(yè)-1）5-5.1-1表單元素?cái)?shù)據(jù)要求說(shuō)明的添加5-5.1-2注冊(cè)表單的數(shù)據(jù)驗(yàn)證-講解部分5-5.1-3注冊(cè)表單的數(shù)據(jù)驗(yàn)證-操作部分5-5.1-4腳本文件的引用與驗(yàn)證函數(shù)的調(diào)用5-5.1-5表單數(shù)據(jù)驗(yàn)證-密碼與確認(rèn)密碼驗(yàn)證5-5.1-6使用H5表單元素新屬性完成驗(yàn)證2.設(shè)計(jì)職教云頭腦風(fēng)暴問(wèn)題、搶答問(wèn)題、搖一搖問(wèn)題和課堂討論問(wèn)題，為課堂使用做準(zhǔn)備3.批閱學(xué)生的預(yù)習(xí)作業(yè)1.觀看視頻5-5.1-1（約5分鐘）5-5.1-2（約3分鐘）5-5.1-3（約7分鐘）5-5.1-4（約5分鐘）5-5.1-5（約6分

4、鐘）5-5.1-6（約6分鐘）2.思考翻轉(zhuǎn)課堂問(wèn)題，完成預(yù)習(xí)作業(yè)-設(shè)計(jì)注冊(cè)界面并完成簡(jiǎn)單數(shù)據(jù)提交（約30分鐘）3.完成“課前預(yù)習(xí)中的難點(diǎn)問(wèn)題調(diào)查問(wèn)卷”課中活動(dòng)（檢查預(yù)習(xí)效果，講解重點(diǎn)難點(diǎn)）及時(shí)間安排1.導(dǎo)入模塊-表單驗(yàn)證的重要性（5分鐘）2.使用HTML5表單元素新屬性進(jìn)行數(shù)據(jù)驗(yàn)證（40分鐘）3.使用js函數(shù)完成密碼和確認(rèn)密碼一致性判斷（35分鐘）4.課中考核與總結(jié)（10分鐘）環(huán)節(jié)1-導(dǎo)入模塊：表單數(shù)據(jù)驗(yàn)證的重要性（5分鐘）重點(diǎn)：表單數(shù)據(jù)驗(yàn)證的重要性教學(xué)手段：?jiǎn)栴}導(dǎo)向教師活動(dòng)學(xué)生活動(dòng)講解重點(diǎn)：表單數(shù)據(jù)驗(yàn)證的重要性（動(dòng)畫(huà)演示+講解）運(yùn)行注冊(cè)頁(yè)面，教師輸入不符合要求的數(shù)據(jù)，說(shuō)明給用戶帶來(lái)的困惑。啟

5、用搶答問(wèn)題：為什么注冊(cè)成功的賬號(hào)無(wú)法登錄？引入課程思政-培養(yǎng)精益求精的工匠精神，避免垃圾數(shù)據(jù)，提升用戶體驗(yàn)（5分鐘）學(xué)生參與討論、聽(tīng)課環(huán)節(jié)2-使用HTML5表單元素新屬性進(jìn)行數(shù)據(jù)驗(yàn)證（40分鐘）重點(diǎn)：完成對(duì)郵件地址、密碼和手機(jī)號(hào)的合法性驗(yàn)證難點(diǎn)：如何設(shè)計(jì)郵件地址、密碼和手機(jī)號(hào)的正則表達(dá)式教學(xué)方法：?jiǎn)栴}導(dǎo)向、設(shè)置障礙、啟發(fā)引導(dǎo)法教師活動(dòng)學(xué)生活動(dòng)（1）解決重點(diǎn)+難點(diǎn)：設(shè)計(jì)正則表達(dá)式完成手機(jī)號(hào)驗(yàn)證（化整為零、啟發(fā)引導(dǎo)法，引導(dǎo)學(xué)生步步前行）第一步，解決首位數(shù)1的要求：引導(dǎo)學(xué)生寫(xiě)出符合首字符要求的正則式 第二步，解決第2位數(shù)字的要求：根據(jù)手機(jī)號(hào)中第2位數(shù)的實(shí)際應(yīng)用情況，引導(dǎo)學(xué)生寫(xiě)出符合中間字符要求的正則

6、式，強(qiáng)調(diào)正則表達(dá)式中或運(yùn)算的應(yīng)用第三步，解決后面9個(gè)數(shù)字的要求：寫(xiě)出相應(yīng)的正則式，強(qiáng)調(diào)設(shè)置字符個(gè)數(shù)的方法課堂練習(xí)：在手機(jī)號(hào)文本框中定義正則表達(dá)式，完成手機(jī)號(hào)的合法性驗(yàn)證，輸入各種不符合要求的手機(jī)號(hào)，觀察效果（8分鐘）學(xué)生思考問(wèn)題，聽(tīng)講完成練習(xí)（2）啟用頭腦風(fēng)暴問(wèn)題：你認(rèn)為表單數(shù)據(jù)驗(yàn)證在瀏覽器端進(jìn)行還是在服務(wù)器端進(jìn)行？為什么？教師強(qiáng)調(diào)在瀏覽器端進(jìn)行數(shù)據(jù)驗(yàn)證的原因和重要性（5分鐘）學(xué)生思考問(wèn)題、聽(tīng)講（3）回顧前導(dǎo)課程的知識(shí)，啟用頭腦風(fēng)暴問(wèn)題：HTML5中不允許表單元素為空，需要使用的屬性是什么？設(shè)置正則表達(dá)式，需要使用的屬性是什么？學(xué)生回答之后，教師加以簡(jiǎn)單說(shuō)明，并在郵件地址和密碼框中設(shè)置不允許為

7、空，運(yùn)行讓學(xué)生觀察效果。（5分鐘）回答問(wèn)題、聽(tīng)課（4）解決重點(diǎn)+難點(diǎn)：設(shè)計(jì)正則表達(dá)式，完成郵件地址驗(yàn)證（化整為零、啟發(fā)引導(dǎo)法，隨機(jī)提問(wèn)，引導(dǎo)學(xué)生步步前行）第一步，解決首字符的要求：引導(dǎo)學(xué)生寫(xiě)出符合首字符要求的正則式，強(qiáng)調(diào)字符范圍的寫(xiě)法第二步，解決中間部分字符的要求：引導(dǎo)學(xué)生寫(xiě)出符合中間字符要求的正則式，強(qiáng)調(diào)要設(shè)置個(gè)數(shù)范圍時(shí)需要注意的問(wèn)題第三步，解決尾字符的要求：讓學(xué)生獨(dú)立寫(xiě)出正則式（12分鐘）學(xué)生思考問(wèn)題，聽(tīng)講（6）解決重點(diǎn)+難點(diǎn)：設(shè)計(jì)正則表達(dá)式完成密碼驗(yàn)證（啟發(fā)引導(dǎo)法）啟用頭腦風(fēng)暴問(wèn)題：如何將需要的密碼字符都提供給用戶？引導(dǎo)學(xué)生將需要的各種字符都寫(xiě)入字符范圍中，增加字符個(gè)數(shù)范圍要求即可啟用搖

8、一搖問(wèn)題：學(xué)生登臺(tái)實(shí)操完成設(shè)計(jì)（10分鐘）學(xué)生思考問(wèn)題回答問(wèn)題，登臺(tái)實(shí)操、聽(tīng)講環(huán)節(jié)3-使用js函數(shù)完成密碼和確認(rèn)密碼一致性判斷（35分鐘）重點(diǎn)：判斷兩次密碼一致性的函數(shù)的定義和調(diào)用難點(diǎn)：使用js代碼阻止非法數(shù)據(jù)提交的原理教學(xué)方法：?jiǎn)栴}導(dǎo)向、啟發(fā)引導(dǎo)、實(shí)例演示法教師活動(dòng)學(xué)生活動(dòng)（1）啟用搖一搖回答問(wèn)題：對(duì)于兩次密碼的一致性判斷，為何不能使用HTML5正則表達(dá)式完成？教師加以說(shuō)明，引出使用js完成兩次密碼一致性判斷的必要性（4分鐘）。學(xué)生思考并回答問(wèn)題聽(tīng)講并實(shí)操（2）解決難點(diǎn)：使用js代碼阻止非法數(shù)據(jù)提交的原理（設(shè)計(jì)3個(gè)連環(huán)扣問(wèn)題引導(dǎo)學(xué)生思考）第一個(gè)問(wèn)題一起回答：點(diǎn)擊什么按鈕時(shí)能夠?qū)⒆?cè)界面的數(shù)據(jù)

9、提交給服務(wù)器？第二個(gè)問(wèn)題頭腦風(fēng)暴：點(diǎn)擊submit按鈕時(shí)，觸發(fā)的是哪一個(gè)元素的什么事件？對(duì)應(yīng)的事件屬性是什么？第三個(gè)問(wèn)題搶答問(wèn)題：你認(rèn)為在屬性onsubmit中使用什么樣的js代碼可以阻止數(shù)據(jù)提交給服務(wù)器？教師對(duì)三個(gè)問(wèn)題分別進(jìn)行講解動(dòng)畫(huà)演示onsubmit=return false|true的應(yīng)用，之后，教師總結(jié)若是onsubmit設(shè)置為return false，無(wú)論數(shù)據(jù)是否符合要求，都不會(huì)將數(shù)據(jù)提交給服務(wù)器；若是onsubmit設(shè)置為return true，無(wú)論數(shù)據(jù)是否符合要求，都將數(shù)據(jù)提交給服務(wù)器提出兩次密碼一致的驗(yàn)證函數(shù)的功能要求（10分鐘）學(xué)生思考問(wèn)題、回答問(wèn)題、聽(tīng)講（3）使用流程圖講

10、解判斷兩次密碼一致的操作流程啟用搖一搖問(wèn)題：如何改成單分支結(jié)構(gòu)？（4分鐘）學(xué)生回答問(wèn)題、聽(tīng)講（4）通過(guò)設(shè)置障礙完成課堂練習(xí)：函數(shù)的定義并調(diào)用分別設(shè)置函數(shù)內(nèi)部缺少return false、調(diào)用函數(shù)時(shí)缺少return運(yùn)行效果根據(jù)執(zhí)行結(jié)果提出問(wèn)題：出現(xiàn)確認(rèn)密碼錯(cuò)誤提示信息之后，用戶會(huì)有怎樣的感受和訴求？引導(dǎo)學(xué)生優(yōu)化函數(shù)代碼結(jié)構(gòu)，引出課程思政-培養(yǎng)學(xué)生精益求精的工匠精神，設(shè)計(jì)友好用戶界面，提升用戶體驗(yàn)（17分鐘）學(xué)生完成練習(xí)環(huán)節(jié)4-課中考核與總結(jié)（10分鐘）（1）完成職教云表單數(shù)據(jù)驗(yàn)證相關(guān)課堂小測(cè)試（5分鐘）（2）學(xué)生總結(jié)本次課的收獲（2分鐘）（3）教師總結(jié)重難點(diǎn)及學(xué)生遇到的各種問(wèn)題（3分鐘）課后活動(dòng)學(xué)生活動(dòng)（總結(jié)與能力提升）教師活動(dòng)（教學(xué)總結(jié)與反思）（1）完成職教云課堂中的課后總結(jié)。（2）能力提升與拓展：使用正則表達(dá)式對(duì)手機(jī)號(hào)進(jìn)行驗(yàn)證時(shí)并沒(méi)有排除0號(hào)碼的問(wèn)題，若是要求手機(jī)號(hào)中不能允許出現(xiàn)連續(xù)4位或4位以上的0，完成相關(guān)驗(yàn)證。（1）教學(xué)效果：本次課的教學(xué)目標(biāo)全部完成，根據(jù)課堂考核效果來(lái)看，85%以上學(xué)生對(duì)重點(diǎn)難點(diǎn)都能理解掌握，約9%的學(xué)生對(duì)return false的問(wèn)題處于似懂非懂的狀態(tài)，需要課后繼續(xù)鞏固，另有6%的同學(xué)沒(méi)有達(dá)到要求，針對(duì)這幾個(gè)同學(xué)，以額外布置作業(yè)的方式督促他們學(xué)習(xí)。（2）教學(xué)特色：應(yīng)用動(dòng)畫(huà)展