首頁猿問阻止使用腳本發送表單

阻止使用腳本發送表單

JavaScript

智慧大石 2022-09-29 16:59:28

我有發送數據的html表單。action ="script.php"我想防止表單與JS一起發送，但它什么都不做并發送數據。納斯洛夫 = 頭銜This is html:<form name = "my_form" enctype="multipart/form-data" method = "POST" action = "skripta.php"> <div class="form-group row "> <div class="col-md-6"> <span id="porukaTitle" class="bojaPoruke"></span> <label for="naslov">Naslov</label> <input type="text" name="naslov" class="form-control" id="naslov"> </div></form>這是 JS：<script type="text/javascript"> document.getElementById("slanje").onclick = function (event) { var slanjeForme=true; var poljeTitle=document.getElementById("naslov"); var naslov=document.getElementById("naslov").value; if (naslov.lenght < 5 || naslov.lenght > 30) { slanjeForme=false; poljeTitle.style.border="1px dashed red"; document.getElementById("porukaTitle").innerHTML="Naslov vjesti mora imati izme?u 5 i 30 znakova!<br>"; } else { poljeTitle.style.border="1px solid green"; document.getElementById( "porukaTitle").innerHTML=""; } if (slanjeForme != true) { event.preventDefault(); } }</script>問題是它總是發送數據。

查看完整描述

3 回答

叮當貓咪

TA貢獻1776條經驗獲得超12個贊

不要使用“單擊”處理程序，而是使用 FORM 的事件處理程序！"submit"
創建一個漂亮的可重用驗證函數，該函數還將使用 classList.toggle（） 處理輸入樣式
使用所需的驗證程序填充函數validate
最后使用 CSS 來處理錯誤邊框和消息可見性使用類is-error
始終將錯誤SPAN元素作為所需操作元素的同級元素放置，這樣當輸入獲得時，我們可以使用CSS的常規同級組合器來定位它?.is-error

無論你有多少個輸入，你都不需要編寫額外的JS邏輯。只需驗證所需的那些，例如const has_err = validate(EL("#foo"), "length");

const validate = (el, validatorName = "length") => {

const val = el.value.trim();

const isErr = {

// Basic, validates if there's value

length: () => val.length < 1,

// Validate between 5 and 30 charaters

length_5_30: () => val.length < 5 || val.length > 30,

// Add more validators

}[validatorName]();

el.classList.toggle("is-error", isErr);

return isErr;

};

const EL = (sel, EL) => (EL || document).querySelector(sel);

EL("#my_form").addEventListener("submit", function(event) {

const err_1 = validate(EL("#naslov"), "length_5_30");

const err_2 = validate(EL("#bla"), "length");

if (err_1 || err_2) {

event.preventDefault();

}

});

form .is-error {

outline: 1px dashed red;

}

form .error-message {

display: none;

color: red;

}

form .is-error ~ .error-message {

display: block;

}

<label for="naslov">Naslov</label>

<span class="error-message">Naslov vjesti mora imati izme?u 5 i 30 znakova!</span>

</div>

<span class="error-message">Ovo polje ne mo?e biti prazno!</span>

</div>

</form>

反對回復 2022-09-29

MM們

TA貢獻1886條經驗獲得超2個贊

應改用表單驗證函數。在表單中，添加一個名為“提交時”的屬性。表單應如下所示：

<form onsubmit="return checkBeforeSubmitting()"></form>

然后，您可以在發送數據之前運行函數。如果您不希望發送數據，請在特定條件下使“在提交之前檢查（）”返回為假。

鏈接到有關如何使用此功能的更多信息：https://www.w3schools.com/js/js_validation.asp

反對回復 2022-09-29

犯罪嫌疑人X

TA貢獻2080條經驗獲得超4個贊

阻止表單提交的最好方法是掛接到其事件中，并在 java 腳本中執行此操作，而不是將 java 腳本添加到 html 中。它看起來像這樣：submit

var form = document.querySelector('form.myform');

form.addEventListener('submit', e => {

// put your conditional here

if( please_dont_submit == true ) {

e.preventDefault();

}

// else form will submit;

});

</form>

在完成之后，您可能還希望從表單本身內部提交表單。您可以通過設置一個標志來指示檢查已被處理來執行此操作：preventDefault()

const form = document.querySelector('form.myform');

var okToSubmit = false;

form.addEventListener('submit', e => {

// put your conditional here

if( please_dont_submit == true && ! okToSubmit ) {

e.preventDefault();

// do some further processing and submit again.

okToSubmit = true;

e.target.submit();

}

// else form will submit;

});

反對回復 2022-09-29

3 回答
0 關注
131 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

阻止使用腳本發送表單

阻止使用腳本發送表單

3 回答

添加回答