在Web開發中,表單數據驗證是必不可少的。而在表單數據驗證中,數字驗證碼的應用是廣泛的。jQuery可以方便地實現表單數字驗證碼,下面就詳細介紹一下如何實現。
/* * 觸發驗證碼刷新事件 */ $("#verifyCodeImg").click(function(){ $(this).attr("src", "verifyCode.php?"+Math.random()); }); /* * 驗證碼校驗函數 */ function checkVerifyCode() { var inputVerifyCode = $("#verifyCodeInput").val(); if(inputVerifyCode == null || inputVerifyCode == "" || inputVerifyCode.length != 4) { alert("請輸入正確的驗證碼!"); return false; } return true; }
上述代碼中,我們首先編寫了一個觸發驗證碼刷新的事件,當用戶點擊驗證圖片時,會重新生成一張驗證碼圖片,其中的隨機數可以確保驗證碼不會重復。
接下來是驗證碼校驗函數,該函數會在用戶提交表單時被調用。我們首先獲取用戶輸入的驗證碼,然后對其進行驗證。如果輸入為空,或者長度不為4,則說明驗證碼輸入不正確。如果驗證碼輸入正確,則返回true,否則返回false,表單提交將被阻止。
在HTML代碼中,我們需要添加一個驗證碼圖片元素和一個驗證碼輸入框元素。其中,驗證碼圖片需要填寫生成驗證碼圖片的php地址。
<img id="verifyCodeImg" src="verifyCode.php?<?php echo mt_rand(); ?>"> <input type="text" id="verifyCodeInput" name="verifyCodeInput" placeholder="請輸入驗證碼">
至此,整個jQuery表單數字驗證碼的實現過程就完成了。我們只需要在需要驗證驗證碼的表單中引入上述代碼即可。
下一篇div p 同行