10 表單驗(yàn)證PHP動態(tài)網(wǎng)站開發(fā)項(xiàng)目教程課件

項(xiàng)目1會員管理系統(tǒng)任務(wù)7表單驗(yàn)證成都職業(yè)技術(shù)學(xué)院軟件學(xué)院主講教師：牟奇春前端表單驗(yàn)證的重要性我們在任務(wù)6中，簡單判斷了一下用戶名是否填寫，并判斷了密碼和確認(rèn)密碼是否相同。在實(shí)際項(xiàng)目開發(fā)中，這遠(yuǎn)遠(yuǎn)不夠。可以這樣講，任何表單，在數(shù)據(jù)提交到后端之前，都應(yīng)該進(jìn)行數(shù)據(jù)的驗(yàn)證，確保數(shù)據(jù)的合法有效。前端表單驗(yàn)證的重要性數(shù)據(jù)的驗(yàn)證，需要在前端和后端同時(shí)進(jìn)行，這樣做的目的是為了保證系統(tǒng)的安全，減輕服務(wù)器壓力。比如，用戶明明沒有填寫用戶名，還是去點(diǎn)擊提交按鈕，這顯然是沒有意義的。如果在前端不進(jìn)行判斷和處理，這一次無效的交互，仍然要占用服務(wù)器的時(shí)間。另外，我們后端主要是使用SQL語句和數(shù)據(jù)庫進(jìn)行交互，如果前端不加以限制，可能會輸入一些危險(xiǎn)字符，引入SQL注入風(fēng)險(xiǎn)。關(guān)于SQL注入的相關(guān)內(nèi)容，大家可以參閱以下鏈接：表單驗(yàn)證的內(nèi)容在前端進(jìn)行數(shù)據(jù)驗(yàn)證，我們一般是使用javaScript來進(jìn)行數(shù)據(jù)的驗(yàn)證。為了避免前端繞過javaScript，在后端接收到數(shù)據(jù)后，還需要再一次的進(jìn)行驗(yàn)證。在會員注冊表單中，需要驗(yàn)證的內(nèi)容有：用戶名：必填，只能是大小寫字符、數(shù)字，長度為3-10。密碼：必填，只能是大小寫字符、數(shù)字、_、*，長度為6-10。確認(rèn)密碼：必填，且必須和密碼保持一致。信箱：格式必須正確，可以不填。愛好：可以不選。表單驗(yàn)證的方法在單擊“提交”按鈕時(shí)，要攔截系統(tǒng)提交，先驗(yàn)證數(shù)據(jù)，合格后再提交表單。只需要在form標(biāo)簽中添加一個onsubmit的事件即可實(shí)現(xiàn)提交攔截：表單驗(yàn)證的方法當(dāng)我們點(diǎn)擊提交按鈕時(shí)，會觸發(fā)提交事件，系統(tǒng)會首先跳轉(zhuǎn)至javaScript方法check，如果check返回為真，則系統(tǒng)繼續(xù)提交，如果返回為假，則阻止提交。具體的check方法代碼如下：前端表單驗(yàn)證的具體代碼前端表單驗(yàn)證的具體代碼首先，我們用document.getElementsByName讀取名字為'username'的元素，這樣就得到一個數(shù)組。但我們整個頁面中，只有一個username的元素，因此，我們?nèi)〈藬?shù)組的第一個元素，然后讀取其value屬性即可得到用戶輸入的用戶名，再使用trim方法，去除前面的空格。其他幾個數(shù)據(jù)的讀取方式也就是一樣的原理。接下來，我們使用了正則表達(dá)式來判斷數(shù)據(jù)的內(nèi)容。前端表單驗(yàn)證的具體代碼用戶名的驗(yàn)證：/^[a-zA-Z0-9]{3,10}$/，表示只允許大寫和小寫字母、數(shù)字，長度范圍是3-10。使用test方法進(jìn)行正則測試，如果返回真，則說明測試通過。如果返回假，則說明測試有誤，此時(shí)就會彈窗提示錯誤，并返回false，阻止表單的自動提交。前端表單驗(yàn)證的具體代碼密碼的驗(yàn)證：/^[a-zA-Z0-9_*]{6,10}$/，表示只允許大小寫字母、數(shù)字和*，長度范圍是6-10。郵箱的驗(yàn)證：/^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/，這個內(nèi)容復(fù)雜一點(diǎn)，大家可以自己理解一下。后端表單驗(yàn)證的具體代碼在后端，一般使用php中的內(nèi)置函數(shù)和正則表達(dá)式來進(jìn)行表單數(shù)據(jù)的驗(yàn)證。總結(jié)本次課程，我們學(xué)習(xí)了如何使用正則表達(dá)式在前端js中以及后