在現代的網站中,很多表單輸入都需要進行驗證以保證用戶輸入數據的準確性和安全性。而使用jQuery實現邊輸入邊驗證的效果可以為用戶提供及時的反饋信息,增加用戶體驗。
$(document).ready(function() { //獲取輸入框和表單 var input = $("#input"); var form = $("#form"); //表單驗證函數 function validate() { if (input.val().length< 6) { //如果輸入的字符長度小于6 input.addClass("is-invalid"); //給輸入框添加錯誤樣式 return false; } else { input.removeClass("is-invalid"); //移除錯誤樣式 return true; } } //綁定input事件 input.on("input", function() { validate(); }); //表單提交事件 form.on("submit", function(event) { event.preventDefault(); //阻止表單提交 if (validate()) { alert("表單驗證通過"); //表單驗證通過,進行其他操作 } else { alert("表單驗證失敗"); //表單驗證失敗,進行其他操作 } }); });
上述代碼中,我們首先獲取了輸入框和表單的jQuery對象。表單驗證函數validate用于判斷輸入框中的字符個數是否小于6,并添加或移除錯誤樣式。接著我們綁定了input事件來實現邊輸入邊驗證,在每次輸入時調用validate函數。最后是表單提交事件,阻止默認的表單提交行為,在表單驗證通過時進行其他操作,在表單驗證失敗時進行其他操作。