Js處理Form表單空提交問題
對於 Form 表單提交資料,有時候頁面沒有任何欄位需要進行校驗,但這樣就會導致不填寫任何資料,都可以直接儲存、編輯,產生很多無用的記錄,這樣的體驗很不好,我們需要能進行判斷是否表單全域性為空,如何解決這種問題 ?
實現思路:
首先拿到 Form 表單中的所有 input、textarea、select 的資料(一般使用:$("#xxxForm").serialize() 方式),然後因為經常載表單中放一些ID,來做判斷是否編輯,這樣會有一下隱藏域(即<input type='hidden' >),所以要去掉隱藏域的資料,再進行表單資料是否為空的判斷。
如何判斷?
定義一個引數 result = '',然後將序列化得到的表單物件(fmData)在迴圈中和隱藏域的屬性進行比較(實際比較的是引數名是否一致),如果當前屬性在隱藏域的屬性中不存在(不一致),就把當前屬性的值(value)拼接傳遞給 result,最後判斷 result 是否為 ' ' 且 長度是否大於0,如果為 ' ' 或 長度不大於 0 ,則表單全域性為空。
那要對錶單資料進行操作,要怎麼進行呢,首先得序列化表單,獲取頁面所有引數,將隱藏域資料排除掉,但是 serialize() 方法獲得的結果是 " FirstName=xxx&LastName=xxx " 這種一個字串的型別,而不是 Json 型別,所以需要將表單資料序列化為Json 之後進行操作,字串的型別要進行操作會很麻煩,所以需要序列化為Json進行操作,使用 serializeObject() 方法,就可以轉換成 Json 型別資料;
實現方法:
情況一、隱藏的(type="hidden")引數少:
直接再迴圈中排除隱藏域的不需要進行判斷的引數;
/** * 檢驗表單是否為空 */ function checkForm() { //首先序列化表單資料為Json型別 var fmData = $("#myForm").serializeObject(); //定義結果表示是否表單為空 var result = ""; for (var item in fmData) { if (item != "param1" && item != "param2") { result += fmData[item].trim(); } } if (result != "" && result.length > 0) { //xxx... }else{ //xxx... } }
情況二、隱藏的(type="hidden")引數多:
首先定義一個 Json 型別的物件 ignoreData,用於存放需要排除掉的引數,然後再將這些引數(ignoreData)從序列化之後的物件(fmData)中刪除在進行判斷;
/** * 檢驗表單是否為空 */ function checkForm() { var fmData = $("#myForm").serializeObject(); //隱藏域屬性 var ignoreData = { param1: '', param2: '', param3: '', param4: '', param5: '', param6: '', ... }; //去掉隱藏域的屬性 for (var i in ignoreData) { delete fmData[i]; } var result = ""; for (var item in fmData) { result += $.trim(fmData[item]); } if (result != "" && result.length > 0) { //xxx... } else { //xxx... } }
注:關於serializeObject()方法的具體實現:
$.fn.serializeObject = function () {
var result = {};
var array = this.serializeArray();
$.each(array, function () {
if (result[this.name]) {
if (!result[this.name].push) {
result[this.name] = [result[this.name]];
}
result[this.name].push(this.value || '');
} else {
result[this.name] = this.value || '';
}
});
return result;
}