我得到了這段代碼，要求我使用 Javascript 添加驗證功能。這是一個提交的注冊表單，如果名字、姓氏、用戶名或密碼為空，或者密碼的字符長度少于 8 個字符，它應該通過向用戶彈出訊息來驗證它。如果滿足條件，它會彈出一條訊息，告訴用戶注冊成功
<?php
require "function.php";
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$username = addslashes($_POST['username']);
$password = addslashes($_POST['password']);
$date = date('Y-m-d H:i:s');
$firstname = ($_POST['firstname']);
$lastname = ($_POST['lastname']);
$query = "insert into users (username,password,date,firstname,lastname)
values ('$username','$password','$date','$firstname','$lastname')";
$result = mysqli_query($con,$query);
header("Location: login.php");
die;
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="LogIn.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
<title>Sign up</title>
</head>
<body>
<nav>
<ul>
<li><a href="home.php">Home</a></li>
<a href="login.php"><button class = "button2"> <span class = "sign"> Login </button></a>
<a href="signup.php"><button class = "button2"> <span class="sign"> Sign Up</span></button></a>
</ul>
</nav>
<div class="signup">
<div class="signup-box">
<h2>Sign Up for Free</h2>
<p>It's quick and easy</p>
<form method="post" id = "form">
<div class ="box">
<i class="material-icons">person</i>
<input type = "text" name = "firstname" placeholder = "First Name" id = "First_name" required>
</div>
<div class = "box">
<i class="material-icons">person</i>
<input type = "text" name = "lastname" placeholder = "Last Name" id = "Last_Name" required>
</div>
<div class="box">
<i class="material-icons">account_circle</i>
<input type="text" name="username" placeholder="Your username" id = "User_name" required>
</div>
<div class="box">
<i class="material-icons">lock</i>
<input type="password" name="password" placeholder="Your Password" id = "Password" required>
</div>
<input type="submit" id = "submit" value="Sign Up"></input>
</form>
</div>
</div>
</body>
</html>
我嘗試使用 If 陳述句并將每個欄位值與 null 和密碼進行比較，如果密碼欄位的值長度小于 8，我會進行比較。但它不起作用，每當我單擊提交時
uj5u.com熱心網友回復：
在您的form標簽中，您需要指定一個onsubmit事件，例如
onsubmit="return validateForm();"
因此，如果您的validateForm函式回傳true（“有效”），則form提交，如果回傳false，form則不提交。現在，讓我們實施validateForm：
function validateForm() {
let firstName = document.getElementById("First_name").value;
let lastName = document.getElementById("Last_Name").value;
let username = document.getElementById("User_name").value;
let password = document.getElementById("Password").value;
error = "";
let isValid = (!!firstName);
if (!isValid) error = "First name is empty";
isValid = isValid && lastName;
if ((!isValid) && (!error)) error = "Last name is empty";
isValid = isValid && username;
if ((!isValid) && (!error)) error = "Username is empty";
isValid = isValid && password;
if ((!isValid) && (!error)) error = "Password is empty";
isValid = isValid && (password.length >= 8);
if ((!isValid) && (!error)) error = "Password too short";
if (isValid) alert("Validation succeeded");
else alert(error);
return isValid;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/536911.html