如何重復 JavaScript 表單驗證，直到所有輸入正確，然后將輸入插入數據庫？
[英]How can I repeat JavaScript form validation until all inputs are correct, then insert the inputs in the database?
問題描述
我正在嘗試創建一個注冊頁面並驗證我使用 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;
}
}
}
1 個解決方案
解決方案1
1 2021-10-30 12:11:29
使用這樣的表單提交回調的第一步是通過攔截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>
解決方案2
0 2021-10-30 11:46:34
嘗試使用：
function validateFormRec(){
e.preventDefault();
...
}
在函數validateFormRec()的開頭，防止表單在返回false 時提交。
javascript錯誤表單驗證：提交時會清除所有輸入字段
[英]javascript error form validation: all inputs fields are cleared on submitting
如何獲取嵌套的ng-repeat表單輸入以停止相互更新？
[英]How can I get my nested ng-repeat form inputs to stop updating each other?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.