1

我正在尝试创建一个主卡检查网站，其中将检查信用卡号、到期日期和 CVV（使用 JavaScript）。如果详细信息正确，用户将被重定向到另一个页面，信用卡详细信息将存储在 MYSQL 数据库中（使用 PHP）。

我已经设法创建了两个网页，并且 javaScript 函数工作正常，但问题是当用户输入任何不正确的详细信息时，将显示一个警告对话框，告诉用户输入正确的（卡号、日期、.... ) 这是我想要的，但是当我单击“确定”时，它会自动将我重定向到另一个页面并将详细信息存储在数据库中。

我希望您能帮助解决这个问题，这样当用户单击“确定”时，它不会重定向到其他网页，并允许用户更正详细信息。

我尝试将 onsubmit = "return false" 放在里面，它起作用并允许用户重新编辑详细信息，但是当它将用户重定向到另一个网页时，PHP/MySQL 会为字段显示“未定义索引”。我尝试删除 onsubmit = "return false" 并且 "UNDEFINED INDEX" 错误消失了，但警报对话问题再次出现。

请帮助解决上述问题。

在解决每个警报和警报框问题后，我尝试添加 return false，但第二页显示“未定义索引”mysql 错误。

第一个网页的 HTML 代码

<!DOCTYPE html>
<html lang="en">
<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" align="right">
    <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> 
    <div id="date">
        <label for="Expiration">Expiration Date</label>
        <select id= "month" name="month">
            <option selected value="month">Month</option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
            <option value="April">April</option>
            <option value="May">May</option>
            <option value="June">June</option>
            <option value="July">July</option>
            <option value="August">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
        </select>

        <select id= "year" name="year">
            <option selected value="year">Year</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
            <option value="2026">2026</option>
        </select>

    </div>
    <br>
    <div id= "securityCode">
      <label for="cvv">Security Code</label>
      <input type="text" name="cvv" id="cvv" style="width:100px;">
      <p>(3-4 digit code normally on the back of your card)</p>
    </div>
    <br>    
    <button type="submit" id="submit-button" onclick="cardCheck(document.form1.payment)">Continue</button>
</form>  
</div> 
<script src="credit-card-master-validation.js"></script>
</body>
</html>

第二个网页的 HTML/PHP 代码

<?php
$servername = "localhost";
$database = "creditCard";
$username = "root";
$password = "";

// Create connection

$conn = mysqli_connect($servername, $username, $password, $database);

// Check connection

if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
}

echo "Connected successfully";

$sql = "INSERT INTO card (ccnum, expmonth, expyear, seccode)
VALUES ('$_POST[creditCard]','$_POST[month]','$_POST[year]','$_POST[cvv]')";
if (mysqli_query($conn, $sql)) {
      echo "New record created successfully";
} else {
      echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Payment Successful</title>
<link rel="stylesheet" href='form-style.css' type='text/css' />
</head>
<body>
<div class="mail">
<h2 style="margin-left:0px;">You have successfully entered your credit card details</h2>
<hr>
<div id="CardImage/Text">
    <br>
    <img src="mastercard.png" alt="MasterCard" width="100px" height="50px" align="right">
    <h3 style="margin-left:90px;"> Debit / Credit Card</h3>
    <br>
</div>  
<div id= "successPaymentConsole" style="margin-left:50px; padding-bottom:200px"> 
</div> 
<script src="credit-card-master-validation.js"></script>
</body>
</html>

JavaScript 代码

function cardCheck()
{
    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) {                    
                    window.location.href = "secondpage.php";
                } 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!");
    }
}
4

3 回答 3

-1

从HTML 中的元素中删除该onsubmit属性。<form>尝试addEventListener在 JavaScript 中使用来监听事件。

如果我们使用cardCheck函数作为submit事件的回调，我们可以在函数内部控制事件会发生什么。使用event.preventDefault将阻止表单提交。event.preventDefault例如，当您使用click事件时，它将阻止默认的单击行为。所以现在表单不会提交，你可以给它你想要的行为。

我已将您的嵌套 if 语句修改为不需要嵌套的结构。在我看来，这更具可读性。return关键字在此至关重要。只要if语句为真，函数就会停止。只有当所有if语句的结果都是错误的（这意味着所有输入都是正确的）时，用户才会被路由到下一页。

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";

}
于 2020-03-14T12:19:27.193 回答
-1

解决此问题的一种方法是仅使用 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!");
}
}
于 2020-03-14T13:13:36.933 回答
-1

当您使用return falsethen 您关闭默认提交行为。然后你通过改变做一个简单的重定向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!");
}
}

没有尝试过，但希望它能帮助您解决问题。

于 2020-03-14T12:19:09.920 回答