使用 JavaScript 的表单验证不适用于 PHP

Question

我有个问题。 有人可以帮我解决这个问题吗？ 我不知道为什么使用 JavaScript 的表单验证与 HTML 一起工作得很好，但是当添加 PHP 时，表单验证不起作用。 例如，当我将用户名留空或用户名以数字开头（这是不允许的）时，表单仍然成功提交并将用户输入成功保存到数据库中。 感谢您的帮助。

 var check_form=document.getElementById("registration"); var pattern=/^[a-zA-Z\\s]+$/gi; var patternUsername=/^[A-Za-z]\\w*$/; function check(event){ var userName=document.getElementById("username"); var passWord=document.getElementById("password"); var last_name=document.getElementById("lastName"); var first_name=document.getElementById("firstName"); var collegeName=document.getElementById("uni"); var majorName=document.getElementById("majoring"); event.preventDefault(); if(userName.value==""){ alert("User name needs to be specified"); userName.focus(); } else{ if(!patternUsername.test(userName.value)){ alert("Invalid username"); userName.focus(); } } if(passWord.value==""){ alert("Password needs to be specified"); first_name.focus(); } else{ if(passWord.length<8){ alert("Password needs to be longer than 8 characters"); passWord.focus(); } } if(first_name.value==""){ alert("First name needs to be specified"); first_name.focus(); } else{ if(!pattern.test(first_name.value)){ alert("First name does not allow number"); first_name.focus(); } } if(last_name.value==""){ alert("Last name needs to be specified"); last_name.focus(); } else{ if(!pattern.test(last_name.value)){ alert("Last name does not allow number"); last_name.focus(); } } if(collegeName.value==""){ alert("College name needs to be specified"); userName.focus(); } else{ if(!pattern.test(collegeName.value)){ alert("Invalid college name"); collegeName.focus(); } } if(majorName.value==""){ alert("Major name needs to be specified"); userName.focus(); } else{ if(!pattern.test(majorName.value)){ alert("Invalid major name"); majorName.focus(); } } if(first_name.value!=="" && last_name.value!==""&&email!==""&&pattern.test(first_name.value)&&pattern.test(last_name.value)){ alert("Perfect"); } } check_form.addEventListener("submit",check);

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Register</title> <link rel="stylesheet" href="./register.css"> <script src="./script.js" defer></script> <style> form div{ padding: 8px; } </style> <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"> </head> <body> <form id="registration" action="register.php" method="post"> <h1>Register</h1> <div id='userName'> <label for="username">Username: </label> <input type="text" id="username" name="user_name"><br> </div> <div id="passWord"> <label for="password">Password: </label> <input type="text" id="password" name="pass"><br> </div> <div id='firstname'> <label for="firstName">First Name: </label> <input type="text" id="firstName" name="first_name"><br> </div> <div id="lastname"> <label for="lastName">Last Name: </label> <input type="text" id="lastName" name="last_name"><br> </div> <div id="uniName"> <label for="uni">College Name: </label> <input type="text" id="uni" name="uni"><br> </div> <div id="majorName"> <label for="majoring">Major: </label> <input type="text" id="majoring" name="major"><br> </div> <br> <input id="buttonRegister" type="submit" name="register" value="Register"><br><br> <a href="./login.php">Already have an account?</a> </form> </body> </html>

   <?php
   session_start();
   require 'connect.php';
   if(isset($_POST['register'])){


$username = !empty($_POST['user_name']) ? trim($_POST['user_name']) : null;
$pass = !empty($_POST['pass']) ? trim($_POST['pass']) : null;
$firstName = !empty($_POST['first_name']) ? trim($_POST['first_name']) : null;
$lastName = !empty($_POST['last_name']) ? trim($_POST['last_name']) : null;
$collegeName = !empty($_POST['uni']) ? trim($_POST['uni']) : null;
$majorName = !empty($_POST['major']) ? trim($_POST['major']) : null;


$sql = "SELECT COUNT(user_name) AS num FROM users WHERE user_name = :username";
$stmt = $conn->prepare($sql);


$stmt->bindValue(':username', $username);


$stmt->execute();


$row = $stmt->fetch(PDO::FETCH_ASSOC);


if($row['num'] > 0){
   die('Username existed');
}

$sql = "INSERT INTO users (user_name, pass, first_name, last_name, uni, major) VALUES (:username, :password, :first_name, :last_name, :uni, :major)";
$stmt = $conn->prepare($sql);


$stmt->bindValue(':username', $username);
$stmt->bindValue(':password', $pass);
$stmt->bindValue(':first_name', $firstName);
$stmt->bindValue(':last_name', $lastName);
$stmt->bindValue(':uni', $collegeName);
$stmt->bindValue(':major', $majorName);


$result = $stmt->execute();


if($result){
    
    echo 'Thank you for registering with our website.';
}

}
?>

Answer 1

尝试将if(passWord.value=="")为if(passWord.value==="") （3 "="而不是 2）。 如果.value=="" ，请将其余的.value==""为.value===""

此外，您有一个逻辑错误： if(passWord.length<8)应设置为if(passWord.length<=8)或if(passWord.length<9) 。

Answer 2

在您的<form>元素中添加 onSubmit 事件示例：

 var data=document.getElementById("f").value; var validation=document.getElementById("p"); function tes(){ if(data==""){ validation.innerHTML ='cant leave data empty'; return false; }else{ return true; } }

 <form action="" method="post" onsubmit="return tes()"> <input name="data" id="f"> <p id="p"></p> <input type="submit" name="send"> </form>

使用 JavaScript 的表单验证不适用于 PHP

问题描述

2 个解决方案

解决方案1
0 2020-11-06 04:10:26

解决方案2
0 2020-11-06 06:52:06

使用 JavaScript 的表单验证不适用于 PHP

问题描述

2 个解决方案

解决方案1 0 2020-11-06 04:10:26

解决方案2 0 2020-11-06 06:52:06

解决方案1
0 2020-11-06 04:10:26

解决方案2
0 2020-11-06 06:52:06