《PHP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)》模擬教學(xué)52驗(yàn)證碼錯(cuò)誤提示信息

團(tuán)隊(duì)合作責(zé)任開(kāi)拓專(zhuān)業(yè)：軟件技術(shù)課程：PHP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)主題：表單數(shù)據(jù)處理--以注冊(cè)和登錄為例第10學(xué)時(shí)模擬教學(xué)2019年山東省職業(yè)院校教學(xué)能力大賽教案目錄

Contents教案

目錄你的數(shù)據(jù)合法了嗎？-注冊(cè)表單的數(shù)據(jù)驗(yàn)證1驗(yàn)證碼為你保駕護(hù)航-驗(yàn)證碼的作用與創(chuàng)建2驗(yàn)證碼為你保駕護(hù)航-驗(yàn)證碼的升級(jí)、加載與刷新3驗(yàn)證碼為你保駕護(hù)航-驗(yàn)證碼的正確性判斷4驗(yàn)證碼為你保駕護(hù)航-表單數(shù)據(jù)回填5你心儀的賬號(hào)被人用了嗎？-注冊(cè)信息的查重6你的數(shù)據(jù)會(huì)去哪里？-注冊(cè)信息的保存與加密7你的賬號(hào)能用了嗎？-實(shí)現(xiàn)登錄功能8教學(xué)內(nèi)容

Contents表單數(shù)據(jù)回填0102驗(yàn)證碼錯(cuò)誤提示信息設(shè)置重點(diǎn)：驗(yàn)證碼錯(cuò)誤提示信息設(shè)置方法重點(diǎn)+難點(diǎn)：設(shè)置提示信息的顯示顏色重點(diǎn)：表單數(shù)據(jù)回填的概念重點(diǎn)+難點(diǎn)：使用js腳本實(shí)現(xiàn)表單數(shù)據(jù)回填問(wèn)題導(dǎo)入課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升驗(yàn)證碼輸入錯(cuò)誤，用戶沒(méi)有意識(shí)到為什么我注冊(cè)完又回到注冊(cè)界面了，還把我注冊(cè)的數(shù)據(jù)都填回來(lái)了，難道需要注冊(cè)第二遍嗎？你希望怎樣呢？課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升課堂討論-暢所欲言吧：這樣的用戶體驗(yàn)，你喜歡嗎？你希望是怎樣的呢？諄諄教導(dǎo)大家必須要有精益求精的工匠精神，盡最大努力設(shè)計(jì)友好界面，提升用戶體驗(yàn)。未來(lái)的程序猿，你該怎樣做？課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升接下來(lái)請(qǐng)隨我一起來(lái)設(shè)計(jì)驗(yàn)證碼錯(cuò)誤提示信息設(shè)計(jì)提示信息課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升增加提示信息課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升可以使用兩種方案設(shè)計(jì)提示信息第一種：使用js彈出消息框顯示（大家課后拓展完成）第二種：在驗(yàn)證碼文本框中顯示使用value設(shè)置提示信息的問(wèn)題課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升搶答問(wèn)題：你認(rèn)為會(huì)有什么缺陷？我們都知道value屬性用于設(shè)置文本框的值，圖中將驗(yàn)證碼錯(cuò)誤提示信息看做文本框的值，使用value屬性設(shè)置的使用value設(shè)置的這種信息，用戶將光標(biāo)放入文本框之后，需要自己刪除這個(gè)提示信息之后才能輸入，否則該信息會(huì)一直存在。使用什么屬性設(shè)置驗(yàn)證碼錯(cuò)誤提示信息？課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升頭腦風(fēng)暴問(wèn)題：在HTML5中哪個(gè)屬性用于設(shè)置表單元素的提示信息？這樣設(shè)置有什么優(yōu)勢(shì)？專(zhuān)門(mén)用于設(shè)置表單元素提示信息的屬性是placeholder，優(yōu)勢(shì)有三：1.當(dāng)用戶進(jìn)入文本框按鍵開(kāi)始輸入時(shí)，提示信息消失2.若是刪除輸入的內(nèi)容，提示信息又會(huì)顯示出來(lái)3.提示信息的顏色不會(huì)影響輸入內(nèi)容的顏色設(shè)置驗(yàn)證碼錯(cuò)誤提示課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升設(shè)置提示信息為紅色產(chǎn)生驗(yàn)證碼字符顯示

提示信息第一步第二步第一步，顯示提示信息課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升zhuce.html頁(yè)面，驗(yàn)證碼錯(cuò)誤，表單數(shù)據(jù)回填之后zhuce.php文件發(fā)現(xiàn)驗(yàn)證碼錯(cuò)誤之后輸出腳本代碼設(shè)置錯(cuò)誤提示信息驗(yàn)證碼輸入錯(cuò)誤，請(qǐng)重新輸入輸出的腳本代碼，要先獲取文本框元素useryzm，之后設(shè)置其屬性placeholder取值顯示驗(yàn)證碼錯(cuò)誤提示信息在zhuce.php文件表單數(shù)據(jù)回填代碼處，增加代碼，設(shè)置zhuce.html文件中useryzm文本框中的提示信息為