我想创建一个注册/登录系统，我在 Register.php 中创建表单，然后将验证部分转到 JavaScript 代码，但我遇到的问题是，当我单击“提交”时，没有值进入数据库。
注册.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/regStyle.css">
<title>Register</title>
</head>
<body>
<div class="container">
<form id="form" class="form" action="register.php" method="POST">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Enter username">
<small> Error message </small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter Email" name="email">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password" >Password</label>
<input type="password" name ="password" id="password" placeholder="Enter password">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password </label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error message</small>
</div>
<button type="submit" name="signup">Signup</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
<<?php
if(isset($_POST["signup"])) {
require("connection.php");
try {
$username = $_POST["username"];
$email = $_POST["email"];
$password = $_POST["password"];
// Sanitize and validate your inputs here
// Hash the password
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
$stmt = $db->prepare("INSERT INTO users (username, email, password) VALUES (:username, :email, :password)");
$stmt->bindParam(':username', $username);
$stmt->bindParam(':email', $email);
$stmt->bindParam(':password', $hashedPassword);
$stmt->execute();
// Redirect or inform the user of successful registration
} catch (PDOException $e) {
// Handle your error here
echo "Error: " . $e->getMessage();
}
$db = null;
}
?>
这是 Script.js
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', function (e) {
if (e.submitter && e.submitter.name === "signup") {
e.preventDefault();
let allErrors = 0;
allErrors += checkRequired([username, email, password, password2]);
allErrors += checkLength(username, 3, 15);
allErrors += checkLength(password, 6, 25);
allErrors += checkEmail(email);
allErrors += checkPasswordMatch(password, password2);
if (allErrors == 0) {
form.submit();
}
}
});
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
function showSuccess(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function checkRequired(inputArr) {
let error = 0;
inputArr.forEach(function (input) {
if (!input.value || input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
++error;
} else {
showSuccess(input);
}
});
return error;
}
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
function checkLength(input, min, max) {
let error = 0;
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
error++;
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be less than ${max} characters`);
error++;
} else {
showSuccess(input);
}
}
function checkEmail(input) {
let error = 0;
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0.9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, 'Email is not valid');
++error;
}
return error;
}
function checkPasswordMatch(input1, input2) {
let error = 0;
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
++error;
}
return error;
}
我希望当用户单击 regiser.php 中的提交按钮时进行验证，并根据验证是否会提交..我做错了什么？
谢谢。
在您的
checkLengtherrorerrorNaNfunction checkLength(input, min, max) {
let error = 0;
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
error++;
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be less than ${max} characters`);
error++;
} else {
showSuccess(input);
}
return error;
}