我使用 javascript 來驗證我的表單輸入，它作業正常，但是當錯誤沒有得到糾正時，表單仍然會被提交。
在用戶進行更正之前，如何防止表單提交？
下面的示例代碼；
$('.validate').hide();
$('body').on('blur', '#phone', function() {
$('.validate').hide();
isphone($(this).val());
});
function isphone(phone) {
if (phone === "1234" || phone === "23456") {
$(".validate").show();
} else {
$(".validate").hide();
}
}<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<form action='' method='POST' id="submitForm">
<input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />
<div class="validate"><span style="color: red;"><b>Phone in use!</b></span></div>
<button href='/' type='submit' id="submitForm">Process</button>
</form>uj5u.com熱心網友回復：
為了寫一個有用的答案，我做了一個小的重構，重寫isphone為一個可重用的驗證函式，它只回傳trueor false。我也改名了。現在我們可以在不同的地方重用驗證邏輯。
formsubmit元素在實際提交之前發出一個事件。我們必須監聽sumbit事件，如果驗證失敗，我們可以return false取消事件，從而阻止表單提交。
$('.validate').hide();
$('body').on('blur', '#phone', function() {
var value = $(this).val();
if (isPhoneInUse(value)) {
$(".validate").show();
} else {
$(".validate").hide();
}
});
$('#submitForm').on('submit', function(e) {
var value = $("#phone").val();
if (isPhoneInUse(value)) {
// validation failed. cancel the event
console.log("not submitting");
return false;
}
})
function isPhoneInUse(phone) {
return (phone === "1234" || phone === "23456")
}<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<form action='' method='POST' id="submitForm">
<input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />
<div class="validate"><span style="color: red;"><b>Phone in use!</b></span></div>
<button href='/' type='submit' id="submitForm">Process</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/462052.html
標籤：javascript 形式 验证 表格提交
上一篇：如何在資料驗證中按數字排序