【发布时间】：2021-12-15 03:25:15
【问题描述】：
我正在尝试创建一个注册页面并验证我使用 JavaScript 的表单，但是当我在表单中输入一些无效输入时，会显示警报消息，并且一旦我单击“确定”，它就会将我重定向到另一个页面并将输入插入数据库。 那么，除非经过验证且正确，否则如何阻止它插入输入？
这是我的注册页面，其中包含 PHP：
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "root";
$dbname = "yummydonations";
$con = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
if(!$con) {
die("failed to connect!");
}
if($_SERVER['REQUEST_METHOD'] == "POST") {
$RecipientName = $_POST['Name'];
$Number = $_POST['Number'];
$password = $_POST['Password'];
if(!empty($RecipientName) && !empty($Number) && !empty($password) && !is_numeric($RecipientName))
{
$Recipient_id = random_int(0, 500);
//mysql_real_escape_string($Recipient_id);
//mysql_real_escape_string($RecipientName);
//mysql_real_escape_string($password);
//mysql_real_escape_string($Number);
$query = "insert into recipient
(id,name,password,mobile)
values ('$Recipient_id','$RecipientName','$password','$Number')";
mysqli_query($con, $query);
header("location:RecpPH.php");
die();
}else {
echo "Please enter some valid information!";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href ="SStyle.css">
<script src="JavaScript.js"></script>
<!-- onclick="validateFormRec(); return false;"-->
</head>
<body>
<header>
<div class="header">
<div class="title">Yummy Donations</div>
<img src="Images/Logo.png" alt="logo" width="100" height="100">
</div>
<div id="bar" >
<ul>
<li></li><li></li><li></li>
<li> <a href="MainHomeP.php" accesskey = "t">Home</a> </li>
<li>/</li>
<li> Sign Up </li>
</ul>
</div>
<div class="image">
<img src="Images/RecPage.jpg" alt="welcome" width="1535" height="700">
<div class="innPicture">
<h1> Join Us! </h1>
</div>
</div>
</header>
<main>
<br>
<body>
<div class="SignUp">
<h2> Sign Up </h2>
<form id ="demo" name="myForm" method="POST" onsubmit="return validateFormRec()">
<div class="container">
<label for="Name"><b>Name:</b></label>
<input id="RecipientsName" type="text" placeholder="Enter Name" name="Name" required value= "">
<label for="Number"><b>Mobile Number:</b></label>
<input id="Number" type="text" placeholder="ex: 966563929302" name="Number" required value= "">
<label for="Password"><b>Password:</b></label>
<input id="Password" type="password" placeholder="Enter Password" name="Password" required value= "">
<button type="submit">Sign Up</button>
</div>
</form>
</div>
</body>
</main>
<footer>
<div class="footer">
<h4>YummyDonations </h4>
<p class="discription">Please help us with spreading awareness <br> to stop food waste!</p>
<div class="verticalLine"></div>
<div class="footerLink">
<h2><br> Connect With Us</h2>
<b>📞 +966502233445 <br> </b>
<b>📠 +966 11 483 0773</b> <br>
<b>                        📩 YummyDonations@gmail.com</b>
</div>
<div class="copyRight">Copyright © 2021 YummyDonations </div>
</div>
</footer>
</body>
</html>
这是 JavaScript 验证函数：
function validateFormRec(){
var n = document.forms["myForm"]["Name"].value;
var e = document.forms["myForm"]["Number"].value;
var p = document.forms["myForm"]["Password"].value;
if (n == "" || e == "" || p == "" ) {
alert("One or more fields are empty! ");
return false;
}else{
//PhoneNum Validation//
var phoneno = /^\d{12}$/;
if( !(e.startsWith("966"))){
alert("The Number must start with 966");
}else if(!(e.match(phoneno))){
alert("The number must contain 12 digits");
} else {
//location.replace("RecpPH.php"); // Rec Home Page
return true;
}
}
}
【问题讨论】：
-
良好的代码缩进将帮助我们阅读代码，更重要的是，它将帮助您调试代码Take a quick look at a coding standard 为您自己的利益。您可能会被要求在几周/几个月内修改此代码，最后您会感谢我的。
-
注意：您的 HTML 中有 2 个
<body>标记，这会导致问题 -
每页不能有 2 个正文元素
-
您的脚本对SQL Injection Attack 开放。即使是if you are escaping inputs, its not safe!，您也应该始终在
MYSQLI_或PDOAPI 中使用prepared parameterized statements，而不是将用户提供的值连接到查询中。永远不要相信任何用户输入！ -
“那么我如何阻止它插入输入，除非它经过验证且正确无误？” 您还必须在 PHP 中验证它并拒绝任何无效输入。 Javascript 只是为了方便用户，PHP 脚本无论如何都接受一切。 PHP 中的表单处理基础知识。
标签： javascript php html jquery css