在網頁開發中,表單驗證是一個常見的需求。通過jquery表單插件,我們可以邊輸邊驗證表單數據,提升用戶體驗,減少用戶提交無效數據的概率。
$(function(){ //為輸入框添加驗證方法 $('input[name="username"]').blur(function(){ //如果輸入框為空,則顯示提示信息 if($(this).val() == ''){ $(this).next('.error').text('用戶名不能為空!'); }else{ $(this).next('.error').text(''); } }); //為表單添加提交事件 $('form').submit(function(){ //觸發所有輸入框的驗證方法 $('input[required]').trigger('blur'); //驗證是否有未通過的驗證方法 if($('.error').text() != ''){ alert('表單填寫不完整或填寫有誤!'); return false; } }); });
代碼中,我們通過jquery選擇器綁定了用戶名輸入框的blur事件,當輸入框失去焦點時觸發相應的驗證方法,判斷輸入框中的值是否為空,如果為空則顯示提示信息,否則清空提示信息。接著,我們為表單添加了提交事件,在提交前先觸發所有需要驗證的輸入框的blur事件,判斷是否有未通過驗證的輸入框,如果有則阻止表單提交并提示用戶。