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

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