我试图创建一个注册页面，并验证我使用JavaScript的表单，但是当我在表单中输入一些无效的输入时，警告消息显示，一旦我点击"OK"它将我重定向到另一个页面，并在数据库中插入输入。那么，除非验证并正确，否则如何阻止它插入输入呢?
这是我的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>
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;
}
}
}
使用这样的表单提交回调的第一步是通过拦截event并调用preventDefault方法来防止表单提交。如果将表单的方法更改为GET，即使提交了表单，PHP也不会处理请求，因此一旦对内容执行了所有逻辑测试，我们就可以更改方法。提交事件回调需要返回一个布尔值来指示验证的成功或失败——如果你将一个简单的变量设置为true，如果测试失败，它的值可以被改变。该布尔变量将返回给事件处理程序。
function validateFormRec(e){
e.preventDefault();
const form=document.forms.myForm;
const col=[...form.elements];
const pttn=/^d{12}$/;
let bValid=true;
col.some(n=>{
if( n.nodeType==1 && n.value=='' && n.type!='submit' ){
alert( '"' + n.name + '" cannot be empty!');
bValid=false;
return true;
}
});
if( !pttn.test(form.Number.value) ){
alert("The number must contain 12 digits");
bValid=false;
}
if( !form.Number.value.startsWith("966") ){
alert("The Number must start with 966");
bValid=false;
}
if( form.Password.value.length < 5 ){
alert('That Password is too short!');
bValid=false;
}
form.method='POST';
return bValid;
}<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><a href="MainHomeP.php" accesskey = "t">Home</a></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>
<div class="SignUp">
<h2> Sign Up </h2>
<form name="myForm" onsubmit="return validateFormRec(event)">
<div class="container">
<label>
<b>Name:</b>
<input type="text" placeholder="Enter Name" name="Name" />
</label>
<label>
<b>Mobile Number:</b>
<input type="text" placeholder="ex: 966563929302" name="Number" />
</label>
<label>
<b>Password:</b>
<input type="password" placeholder="Enter Password" name="Password" />
</label>
<input type='submit' value='Sign up' />
</div>
</form>
</div>
</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>