在提交表單時,為了防止自動程序提交,一般提供有驗證碼。
一般都是在提交表單后在服務器端檢測驗證碼是否正確,如錯誤則阻止表單提交。
為了提高體驗,有的在Form的submit前使用ajax來提前檢測驗證碼是否正確。
這樣還要請求服務器,就想何不使用如下方法,來實現js在客戶端驗證。
步驟
頁面加載時,加載驗證碼圖片,和驗證碼密碼。
驗證碼密碼在服務器端生成,生成規則為 md5(驗證碼+固定隨機碼) 來生成。固定隨機碼只是為了防止md5暴力破解。
客戶端在提交表單前使用js檢測驗證碼是否正確。方法為:將用戶輸入的驗證碼加上固定隨機碼 在js使用md5運算后,與驗證碼密碼比較,如不一樣則驗證碼錯誤。阻止提交表單。
原理
此方法的核心原理就是利用了md5唯一性和無法反向破解的特性。
舉一反三,此種方法也可驗證其他用戶輸入。可能還可應用到 修改密碼,驗證密保等等。
可能你還很糊塗,不知道怎么表達清楚。舉個實例。
實例
1 生成驗證碼 [5u6t9f]
2 將驗證碼存儲在服務器端的session中,並生成 驗證碼密碼[332AWGD] = md5(驗證碼[5u6t9f]+固定隨機碼[21EC2020])
3 客戶端加載頁面,頁面中包含根據驗證碼生成的驗證圖片、驗證碼密碼[332AWGD]、固定隨機碼[21EC2020]
4 提交表單前js通過同樣算法 計算驗證碼密碼=md5(用戶輸入驗證碼+固定隨機碼[21EC2020]) 計算出 新的驗證碼密碼和系統的驗證碼密碼[332AWGD]比較就可知道驗證碼是否正確了。
注意:此種方法只是為了優化用戶體驗,因為高手可跳過JS驗證,所以在服務器端還必須對用戶輸入的驗證進行檢測。
