如果用戶使用檢查元素刪除字段，如何防止表單提交

Question

如果用戶故意使用檢查元素刪除該字段，我想阻止表單提交。 目前我正在使用 jquery 進行自定義驗證。

Answer 1

您可以通過ID或任何方法獲取表單的每個字段，並在發送前與表單匹配。 這是文檔： https://api.jquery.com/event.preventdefault/

但正確的方法是在后端檢查表單數據。 FrontEnd 中的驗證表單必須僅用於檢查數據類型或瑣碎的事情。 現實情況是，如果用戶如此聰明地更改 web 文檔，檢查表格 HTML 是沒有用的。

Answer 2

處理驗證的唯一安全方法是在后端進行驗證，而不僅僅是在前端，正如評論中提到的，用戶仍然可以欺騙您的前端代碼提交表單，無論如何，這是一種防止表單提交的方法，如果元素被刪除，我使用MutationObserver來觀察<ul>標簽的子元素的任何變化，並使用一個標志來防止表單提交，注意有一個計時器在 4 秒后運行來刪除元素，你可以提交在 4 秒 window 之前形成：

 var submitFlag = 1; function callback(mutationList, observer) { mutationList.forEach((mutation) => { switch(mutation.type) { case 'childList': if(mutation.removedNodes.length) { // ADD YOUR CONDITION HERE FOR FORM ELEMENTS submitFlag = 0; } break; } }); } var targetNode = document.querySelector("#someElement"); var observerOptions = { childList: true, attributes: true, subtree: true //Omit or set to false to observe only changes to the parent node. } var observer = new MutationObserver(callback); observer.observe(targetNode, observerOptions); setTimeout(function(){ document.getElementById('el2').remove(); }, 4000); function submitHandler(event) { if(submitFlag === 1) { console.log('submitted'); } else { event.preventDefault(); console.log("can't submit"); } }

 <div id="someElement"> <ul> <li> element 1 </li> <li id="el2"> element 2 </li> <li> element 3 </li> <li> element 4 </li> </ul> </div> <form onsubmit="submitHandler(event)"> Enter name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>