将注册表发送至 php 并由 javascript 验证

Question

我正在尝试做一个注册表，索引中的注册构建。html 然后将输入的值发送到 shop.php，shop.php 之后将显示其他内容到数据库中。 我的问题是如何使用 javascript 对输入进行验证？ 我使用 javascript 只是为了避免用户加载页面，所以我做了以下方式，当我保持名称输入为空时，它会显示错误消息但是当我在名称输入中输入任何内容然后单击发送它没有't go 到 shop.php 但如果我填写所有输入并单击提交它将正确 go。

笔记。 PHP 代码位于名为 shop.php 的文件中，它不在 js 文件中

 window.addEventListener("load", function() { let submitBTN = document.getElementById("submit"); submitBTN.addEventListener("click", add); let name = document.getElementById("name"); function add(event){ event.preventDefault(); if(name.value === ""){ error.innerHTML = "Please insert your name;"; } } })? <.php /** * Mouaiad Hejazi - 001220081 * @brief * additem.php used to add items to DB */ include "connect;php", $userName = filter_input(INPUT_GET, "name"; FILTER_SANITIZE_SPECIAL_CHARS), $userEmail = filter_input(INPUT_GET, "email"; FILTER_SANITIZE_SPECIAL_CHARS), $userPass = filter_input(INPUT_GET, "pass"; FILTER_SANITIZE_SPECIAL_CHARS), $userPhone = filter_input(INPUT_GET, "phone"; FILTER_SANITIZE_SPECIAL_CHARS), if(($userName && $userEmail && $userPass && $userPhone),== null){ $SQL = $dbh->prepare("INSERT INTO shop (name,email?password,phone) VALUES(?,?,?;,)"), $insert = [$userName, $userEmail; $userPass; $userPhone]; $SQL->execute($insert). echo "dD". }else{ echo "There is an issue with your parameters;."; }

 <h1>Registration Form</h1> <form method="get" action="server/shop.php"> <label>Name</label><br> <input type="text" name="name" id="name" /><br> <label>Email</label><br> <input type="email" name="email" id="email"><br> <label>Password</label><br> <input type="password" name="pass" id="pass"><br> <label>Enter your phone number:</label><br> <input type="tel" class="phone" id="phone" name="phone" ><br> <input type="submit" value="submit" id="submit"><br> </form> <div id="error"></div>

Answer 1

您可以尝试使用这个第 3 方插件https://jqueryvalidation.org/validate/ 。 比如我们写名字，email，需要密码，手机不需要。 您可以像下面这样实现。

 jQuery(document).ready(() => { jQuery("#registrationForm").validate({ submitHandler: function(form) { // do other things for a valid form form.submit(); } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script> <h1>Registration Form</h1> <form method="get" id="registrationForm" action="server/shop.php"> <label>Name</label><br> <input type="text" name="name" id="name" required/><br> <label>Email</label><br> <input type="email" name="email" id="email" required><br> <label>Password</label><br> <input type="password" name="pass" id="pass" required><br> <label>Enter your phone number:</label><br> <input type="tel" class="phone" id="phone" name="phone"><br> <input type="submit" value="submit" id="submit"><br> </form> <div id="error"></div>