js 阻止表單提交上的一些認識

2021-09-26 15:00:45 字數 1345 閱讀 6244

背景:有乙個表單,在對**輸入值時,需要實時對對輸入的值進行監控,並及時做出提示,如果輸入不符合要求,就不能提交表單。

嘗試過程

2.1. 想要通過在form上建立乙個obsubmit觸發事件來阻止表單提交,**如下:onsubmit="return check_form()"

function check_form()}})

var concert = $('.cencert').val()

console.log('concert:',concert)

}

結果說明:在那個位置返回的return false,並沒有能阻止表單的提交。但如果在function的最後新增上return false就能阻止表單的提交,但這樣無論是符合填寫要求or不符合填寫要求都不會提交表單,並不是自己想要的。

2.2. 於是自己在網上查詢對應的解決方案,但查詢到的都是一些簡單的案例,並不能就自己的問題來解決。

2.3. 當然我找到了另一種解決方案:

思路:在check_form()中提交ajax請求,最後return,這樣既能提交請求,也可以在不符合要求的情況下阻止表單的提交,但最終這個方法自己沒有去執行。

附上**:

function check_form() 

const form_data = $("#form_data").serialize();

// 非同步提交資料到後台

$.ajax(",

data: ,

type: "post",

datatype: "json",

beforesend: function () ,

success: function (data)

else

},error: function () ,

complete: function ()

});return false;

}

結果說明這個份**是可行的,但我沒有運用到我這次的需求中

3.使用了each方法對該列**進行遍歷,不符合要求的,就給予提示,並設定sumit按鈕不可選。

附上**:

$('tr').each(function ()  else 

}});

**方法說明:**達到了自己的需求,但始終感覺不是正常的常規做法。

總結感想:這個問題其實滿簡單解決的,但由於自己寫**之初,沒有設計這個需求,就沒有使用2.3上面的方法進行解決,採用的是直接form post直接提交。導致後面的check_form()return false失敗。

ajax表單提交的一些問題

ajax表單提交的一些問題 1,datatype型別不對 2,傳送不了請求 3,靜態指令碼的執行在伺服器斷了都可以,但是一旦涉及到網路的請求 ajax 就這部分不可。如上ajax上部分 4,不建議用.formserialize 直接用 serialize 否則一些複雜控制項如select序列化不了 ...

ajax表單提交的一些問題

ajax表單提交的一些問題 1,datatype型別不對 2,傳送不了請求 3,靜態指令碼的執行在伺服器斷了都可以,但是一旦涉及到網路的請求 ajax 就這部分不可。如上ajax上部分 4,不建議用.formserialize 直接用 serialize 否則一些複雜控制項如select序列化不了 ...

關於表單防重複提交一些東東

前陣子弄了些表單防重複提交的東西,想整理整理,免得下次要用時再四處去找,其實這裡的東西還是挺簡單的。原理 在session中儲存乙個表單的唯一編號,將該編號放在乙個隱藏域中,同其他資料一同提交。在提交表單後,通過 或其他機制檢查唯一編號,如果存在則說明表單是第一次提交,如果不存在則被重複提交 理由很...