我正在尝试创建一个万事达卡检查网站，其中将检查信用卡号、到期日期和 CVV（使用 JavaScript）。如果详细信息正确，用户将被重定向到另一个页面，信用卡详细信息将存储在 MYSQL 数据库中（使用 PHP）。我已经成功创建了两个网页，并且 javaScript 功能工作正常，但问题是，当用户输入任何不正确的详细信息时，将显示警报对话框，告诉用户输入正确的信息（卡号、日期……） ）这就是我想要的，但是当我单击“确定”时，它会自动将我重定向到另一个页面并将详细信息存储在数据库中。我希望您帮助解决此问题，以便当用户单击“确定”时，它不会重定向到其他网页，并允许用户更正详细信息。我尝试将 onsubmit = "return false" 放入其中，这有效并允许用户重新编辑详细信息，但是当它将用户重定向到另一个网页时，PHP/MySQL 会显示字段的“UNDEFINED INDEX”。我尝试删除 onsubmit =“return false”，“UNDEFINED INDEX”错误消失，但警报对话问题再次出现。请帮忙解决上述问题。我尝试在解决每个警报和警报框问题后添加 return false，但第二页显示“未定义索引”mysql 错误。第一个网页的 HTML 代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>Payment Page</title><link rel="stylesheet" href='form-style.css' type='text/css' /></head><body><div class="mail"><h2 style="margin-left:0px;">Payment Options</h2><hr><div id="CardImage/Text"> <br> <img src="mastercard.png" alt="MasterCard" width="100px" height="50px"> <h3 style="margin-left:90px;"> Debit / Credit Card</h3> <br></div> <form name="form1" action="secondpage.php" method="post" onsubmit="return false;" ><div id= "payment" style="margin-left:50px; background: #F0F0F0;"> <div id= "cardNumber"> <label for="cardno">Card Number</label> <input type="text" name="creditCard" id="creditCard" style="width:300px;"> </div> <br>
3 回答
慕后森
TA贡献1802条经验 获得超5个赞
从 HTML 中的元素onsubmit中删除该属性。<form>尝试在 JavaScript 中使用addEventListener来监听事件。
如果我们使用该cardCheck函数作为事件的回调submit，我们可以在函数内部控制事件将发生的情况。使用event.preventDefault将阻止表单提交。event.preventDefault例如，当您在click事件中使用时，它将阻止默认的单击行为。所以现在表单不会提交，您可以给它您想要的行为。
我已将您的嵌套 if 语句修改为不需要嵌套的结构。在我看来，这更具可读性。关键字return在此至关重要。每当一个if语句为真时，该函数就会停止。仅当所有if语句的结果均为 false（这意味着所有输入都正确）时，用户才会被路由到下一页。
var form = document.querySelector('form[name="form1"]');
form.addEventListener('submit', cardCheck);
function cardCheck(event)
{
// Don't execute the default submit behavior.
event.preventDefault();
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if (!enteredCardNo.match(cardNo)) {
alert("Not a valid Mastercard number!");
return;
}
if (monthSelectedValue === "month") {
alert("Please select a month");
return;
}
if (yearSelectedValue === "year") {
alert("Please select a year");
return;
}
if (!(enteredCVV.length > 2 && enteredCVV.length < 5)) {
alert("Please input a correct CVV");
return;
}
window.location.href = "secondpage.php";
}
叮当猫咪
TA贡献1776条经验 获得超12个赞
解决此问题的一种方法是仅使用 onsubmit。
从“继续（提交）”按钮中删除 onclick
<button type="submit" id="submit-button">Continue</button>
更改表单元素，以便它在提交时调用cardCheck，如下所示
<form name="form1" action="secondpage.php" method="post" onsubmit="return cardCheck(document.form1.payment)">
在你的卡内检查是否一切正常返回 true 否则返回 false。同时删除submit() 调用。这是更新后的代码
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
return true;
} else {
alert("Please input a correct CVV");
return false;
}
} else {
alert("Please select a year");
return false;
}
} else {
alert("Please select a month");
return false;
}
} else {
alert("Not a valid Mastercard number!");
}
}
白衣染霜花
TA贡献1796条经验 获得超10个赞
当您使用时return false，您会关闭默认的提交行为。然后，您通过更改进行简单的重定向href- 因此表单不会将数据传递到第二页（所有数据$_POST都是空的） - 这就是您出现错误的原因。那么 - 你可以做什么：
将 id 参数添加到表单中，例如：
<form id="creditCardForm" name="form1" action="secondpage.php" method="post" >
然后在cardCheck函数中使用preventDefault。它会阻止表单提交，因此如果数据正常，您必须手动提交表单：
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
document.getElementById("creditCardForm").submit(); //here's the form submittion
} else {
alert("Please input a correct CVV");
}
} else {
alert("Please select a year");
}
} else {
alert("Please select a month");
}
} else {
alert("Not a valid Mastercard number!");
}
}
没有尝试，但希望它能帮助你解决问题。
- 3 回答
- 0 关注
- 70 浏览
添加回答
举报
0/150
提交
取消