【发布时间】：2021-03-31 12:51:38
【问题描述】：
我试图全面了解以前提出的问题，但似乎找不到任何与我的问题相符的内容。
我正在通过 javascript 运行一个前端表单验证器，只是为了检查空白输入，如果用户通过，它将通过 php 在 mysql 中填充一个表。
我发现我根本无法同时运行这两个操作 - 要么我的 javascript 工作并显示我的错误，但甚至没有靠近数据库，要么 javascript 根本无法运行，并将表单数据发送到即使字段为空，数据库也是如此。
代码：
const form = document.getElementById('form');
const firstname = document.getElementById('firstname');
const surname = document.getElementById('surname');
const dob = document.getElementById('dob');
const gender = document.getElementById('gender');
const email = document.getElementById('email');
const username = document.getElementById('username');
const password = document.getElementById('password');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// trim to remove the whitespaces
const firstnameValue = firstname.value.trim();
const surnameValue = surname.value.trim();
const dobValue = dob.value.trim();
const genderValue = gender.value.trim();
const emailValue = email.value.trim();
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
if (firstnameValue === '') {
setErrorFor(firstname, 'Field cannot be blank');
} else {
setSuccessFor(firstname);
}
if (surnameValue === '') {
setErrorFor(surname, 'Field cannot be blank');
} else {
setSuccessFor(surname);
}
if (dobValue === '') {
setErrorFor(dob, 'Field cannot be blank');
} else {
setSuccessFor(dob);
}
if (genderValue === '') {
setErrorFor(gender, 'Field cannot be blank');
} else {
setSuccessFor(gender);
}
if (emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}
if (usernameValue === '') {
setErrorFor(username, 'Field cannot be blank');
} else {
setSuccessFor(username);
}
if (passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
} else {
setSuccessFor(password);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}<!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.0">
<title>Document</title>
<script defer src="registration.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/553d8c77af.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="register.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="header">
<h2>New Account Registration</h2>
</div>
<div class="col">
<form id="form" action="insert.php" name="form" method="POST">
<div class="form-control">
<label for="username">First Name</label>
<input type="text" name="firstname" id="firstname" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Surname</label>
<input type="text" name="surname" id="surname" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Date of Birth</label>
<input type="date" name="dob" id="dob" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Please select your Gender:</label>
<select id="gender" class="input" name="gender">
<option value="" id="gender">Please choose an option</option>
<option value="Male" id="gender">Male</option>
<option value="Female" id="gender">Female</option>
<option value="Prefer not to Say" id="gender">Prefer not to Say</option>
</select>
<small>Error message</small></div>
</div>
<div class="col">
<div class="form-control">
<label for="username">Email</label>
<input type="email" name="email" id="email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Username</label>
<input type="text" name="username" id="username" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password</label>
<input type="password" name="password" id="password" />
<small>Error message</small>
</div>
<input type="submit" class="btn btn-primary" name="submit" id="submit" value="Submit Form">
</div>
</form>
</div>
</body>
</html>PHP 插入
<?php
include_once 'db.php';
if(isset($_POST['submit']))
{
$firstname = $_POST['firstname'];
$surname = $_POST['surname'];
$dob = $_POST['dob'];
$gender = $_POST['gender'];
$email = $_POST['email'];
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "INSERT INTO members (firstname,surname,dob,gender,email,username,password)
VALUES ('$firstname','$surname','$dob','$gender','$email','$username','$password')";
if (mysqli_query($conn, $sql)) {
echo "New record has been added successfully !";
} else {
echo "Error: " . $sql . ":-" . mysqli_error($conn);
}
mysqli_close($conn);
}
?>
PHP 服务器连接
<?php
$servername='localhost';
$username='root';
$password='';
$dbname = 'healthhubmembers';
$conn = mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysqli_error());
}
?>
【问题讨论】：
标签： javascript php