jQuery是一種常用于創建交互式網站的JavaScript庫。在表單驗證方面,jQuery可以方便地為表單元素添加非空驗證,避免用戶輸入無效數據,提高用戶體驗。
$('form').submit(function() { //綁定表單提交事件 var flag = true; // 表單驗證通過標志 $(this).find('input,textarea,select').each(function() { // 遍歷表單元素 var val = $.trim($(this).val()); // 去除輸入值兩端空格 if (!val) { // 驗證為空 $(this).addClass('error'); // 添加錯誤樣式 flag = false; // 驗證不通過 } else { $(this).removeClass('error'); // 移除錯誤樣式 } }); return flag; // 返回表單驗證通過狀態 });
上面的代碼首先綁定了表單的submit事件,然后遍歷了表單中所有的input、textarea和select元素。如果元素的值為空,則給該元素添加一個error類,表示該元素輸入不合法;如果元素不為空,則移除該元素的error類。最后,如果表單驗證通過,則返回一個true狀態,否則返回false狀態。
這段代碼可以自定義error類的樣式,比如用紅色邊框標識輸入錯誤,或者顯示一個提示信息等等。同時,也可以將這段代碼與其他表單驗證功能結合起來,比如驗證郵箱格式、密碼強度等等,做到完整的表單驗證。
下一篇css引用路徑后面帶