使用JavaScript验证和PHP的注册表表单出现问题

我有个问题。我不知道为什么当我只运行HTML和javascript（没有PHP部分）时，验证效果非常好。然而，当我使用HTML和JavaScript运行PHP时，验证不起作用。例如，当用户名为123john时（密码、名称等所有其他内容都满足要求），这是不允许的。表单仍然成功提交（我检查了MySQL数据库，用户123john就在那里）。有人能帮我吗？谢谢你的帮助

最初的代码结构是PHP和HTML在同一个文件中，只有JavaScript在一个单独的文件中

<?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.';
}

 }
  ?>

var check_form=document.getElementById（“注册”）；
变量模式=/^[a-zA-Z\s]+$/；
var patternUsername=/^[A-Za-z]\w*$/；
功能检查（事件）{
var userName=document.getElementById（“用户名”）；
var passWord=document.getElementById（“密码”）；
var last_name=document.getElementById（“lastName”）；
var first_name=document.getElementById（“firstName”）；
var collegeName=document.getElementById（“uni”）；
var majorName=document.getElementById（“majoring”）；
event.preventDefault（）；
如果（userName.value==“”）{
警报（“需要指定用户名”）；
userName.focus（）；
}
否则{
如果（！patternUsername.test（userName.value））{
警报（“无效用户名”）；
userName.focus（）；
}
}
如果（密码值==“”）{
警报（“需要指定密码”）；
passWord.focus（）；
}
否则{
if（passWord.length
表格组{
填充：8px；
}
登记
用户名：


密码：


名字：


姓氏：


学院名称：


主修：

如果要执行客户端验证，则必须将按钮类型从（发送）更改为（按钮）。然后，在JS中创建一个函数来验证表单。 通过单击onclick button=“ItsFunctionForValidateAndSubmit（）”调用该函数。 检查后：使用javascript创建表单提交方法。 这里是一些示例表单提交的链接

问题仍然存在我更新了答案，现在查看并给我反馈。我确实更新了代码，但问题没有解决。如果您将输入与（提交）一起放入，则不会因其验证而中断。您必须在单击事件中调用check（）验证函数，然后必须创建发送方法（使用java脚本）发送表单。通过单击操作调用验证函数，将输入保留为按钮类型。然后使用javascript发送表单。下面是一些JS表单提交示例。

<input type="buttom" name="register" value="Register" onclick="ItsFunctionForValidateAndSubmit()">