如何使用JS验证表单，然后再用PHP和Ajax验证表单？
我有一个HTML表单，我正在使用JavaScript进行验证，如下所示。所有JavasCript代码都在app.js文件中。
App.js文件
function validateForm () {
var amount = document.forms["salesform"]["amount"];
var buyer = document.forms["salesform"]["buyer"];
var buyerRegex = /^[a-zA-Z0-9_ ]*$/;
var receipt_id = document.forms["salesform"]["receipt_id"];
var receiptIdRegex = /^[a-zA-Z_ ]*$/;
let items = document.querySelectorAll(".items")
var itemsRegex = /^[a-zA-Z_ ]*$/;
var buyer_email = document.forms["salesform"]["buyer_email"];
var note = document.forms["salesform"]["note"];
var city = document.forms["salesform"]["city"];
var cityRegex = /^[a-zA-Z_ ]*$/;
var phone = document.forms["salesform"]["phone"];
var phoneRegex = /^[0-9]*$/;
var entry_by = document.forms["salesform"]["entry_by"];
var entryByRegex = /^[0-9]*$/;
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
if (amount.value == "") {
alert("Please enter the amount.");
amount.focus();
return false;
} else if (isNaN(amount.value)) {
alert("Amount must be only numeric value.");
amount.focus();
return false;
} else if (amount.length > 10 ) {
alert("Amount must be less than 10 characters long.");
amount.focus();
return false;
}
// more validation.....
return true;
}在这个文件中，我有另一个使用服务器验证表单的jQuery Ajax代码。因此，我添加了以下Ajax代码，说明了JS验证代码：
$("#salesForm").submit(function(e) {
e.preventDefault();
$.ajax({
url : '../process/add-data.php',
type: 'POST',
dataType: "html",
data : $(this).serialize(),
beforeSend : function () {
$(".formResult").html("Please wait...");
},
success : function ( data ) {
$(".formResult").html( data );
}
});
}); 用于HTML
<form name="salesform" id="salesForm" onsubmit="return validateForm();" method="POST">现在，当表单使用JavaScript进行验证时，它也会使用来验证表单。
但是首先，its应该使用JavaScript进行验证，然后使用Ajax。
回答 2
Stack Overflow用户
发布于 2019-06-21 05:12:12
从元素中删除onSubmit，并修改Ajax函数以在调用之前返回无效表单。
$("#salesForm").submit(function(e) {
e.preventDefault();
if(!validateForm()) return;
$.ajax({
url : '../process/add-data.php',
type: 'POST',
dataType: "html",
data : $(this).serialize(),
beforeSend : function () {
$(".formResult").html("Please wait...");
},
success : function ( data ) {
$(".formResult").html( data );
}
});
}); Stack Overflow用户
发布于 2019-06-21 04:42:13
您需要在false回调中返回beforeSend，正如官方jQuery文档中所描述的那样：
beforeSend类型:函数( jqXHR jqXHR，PlainObject设置) 一个预请求回调函数，可用于在发送对象之前修改jqXHR (在jQuery 1.4.x，XMLHTTPRequest中)。使用此设置自定义标头等。jqXHR和设置对象作为参数传递。这是一个Ajax事件。在beforeSend函数中返回false将取消请求。从jQuery 1.5开始，不管请求的类型如何，都将调用beforeSend选项。
所以，你需要这样做：
beforeSend : function () {
$(".formResult").html("Please wait...");
if(!validateForm()) {
// Here you remove your "Please wait..." message
return false;
}
// Or simply return the value from validateForm():
// return validateForm();
},当然，从表单标记中删除onsubmit="return validateForm();"。
https://stackoverflow.com/questions/56696782
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号