JQuery 表单验证在开发浏览器上不起作用
Posted
技术标签:
【中文标题】JQuery 表单验证在开发浏览器上不起作用【英文标题】：JQuery Form Validation not working on development browsers 【发布时间】：2020-10-18 13:12:40 【问题描述】：美好的一天。我对 javascript 和 JQuery 很陌生，我正在尝试使用 JQuery 向某些表单字段添加一种验证形式。
我写了一个条件语句，如果 FULL NAME 字段为空或小于 6，将添加 html 边界危险类，并有一条消息要求用户输入他/她的全名。否则（如果他输入了他的全名或该字段的内容大于6），则应删除边界危险类，并将状态变量更改为true。
我在浏览器上试过了，但没有用。
它的诀窍在于，当我试图在 *** 上的 HTML/JS/CSS 代码 sn-p 页面上提出问题时，它起作用了。当我点击 REGISTER 按钮而不在字段中输入任何内容时，border-danger 类被添加到 FULL NAME 字段中。
请问为什么它对我不起作用？ （铬和歌剧）。有什么我需要启用的吗？
我已附上注册表（register.php）和JavaScript（main.js）的代码。我还附上了 Chrome 注册表的屏幕截图。
我确定我一定是搞混了。
我需要帮助。非常感谢您的帮助。
感谢期待
Javascript
$(document).ready(function()
$("#registration_form").on("submit",function()
var status = false;
var name = $("#full_name");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var type = $("#usertype");
if (name.val() == "" || fullName.length < 6 )
name.addClass("border-danger");
$("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
status = false;
else
name.removeClass("border-danger");
$("#u_error").html("");
status = true;
)
)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<!--Include Navbar -->
<?php include_once("./templates/header.php");?>
<div class="container" ">
<div class="card mx-auto" style="width: 30rem; ">
<div class="card-header">Register</div>
<div class="card-body">
<form id="registration_form" onsubmit="return false" autocomplete="off">
<!-- Full Name -->
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
<small id="u_error" class="form-text text-muted">
</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!--Password 1-->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
<small id="p1_error" class="form-text text-muted"></small>
</div>
<!-- Password 2 -->
<div class="form-group">
<label for="password2">Re-enter Password</label>
<input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
<small id="p2_error" class="form-text text-muted"></small>
</div>
<!-- User type -->
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" id="usertype">
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">User</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
<button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span> Register</button>
<span><a href="index.php">Login</a></span>
</form>
</div>
<!-- Forgot Password? -->
<!--
<div class="card-footer text-muted" >
<a href="#">Forgot Password?</a>
</div> -->
</div>
</div>
<body>
</html>
【问题讨论】：
对不起，我认为你上面的当前代码是错误的。 "如果 (name.val() == "" || fullName.length 你检查浏览器控制台是否有 js 错误？另外，为什么这个问题用 PHP 标记？ 谢谢。我已经完成了所有推荐的操作，但它仍然无法在 WAMP 上运行。它在 JSFiddle 和 *** 上完美运行。还有什么想法吗？谢谢。 【参考方案1】：if 条件和代码几乎没有问题。
-
您根本没有检查任何内容的长度
要检查输入的长度是否小于 6，您可以执行
name.val().length
此外，您不必像 name.val() == "" 这样 - 只需将!name.val() 设置为 false，这意味着该输入根本没有任何价值。
我找不到fullName 我确定你想使用name
您可以阅读更多关于jQuery - .val() here
我对您的if 进行了一些更改，现在在下面可以正常工作。您可以为其他输入做一些ifelse 以及在将数据发送到您的 PHP 文件之前验证所有输入。
你的文件目录必须是这个 exact 如下：复制下面的 HTML 并将 index.html 和 JS 放入 main.js - 我已经测试了我的 wamp64 本地服务器，一切正常.
主 JS 文件的位置： file:///C:/wamp64/www/inventory_blessed/public_html/js/main.js
index.html 的位置： file:///C:/wamp64/www/inventory_blessed/public_html/index.html
小提琴演示： https://jsfiddle.net/usmanmunir/xob1d439/2/
在下面运行 sn-p 以查看它的实际效果：
$(document).ready(function()
$("#registration_form").on("submit", function()
var status = false;
var name = $("#full_name");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var type = $("#usertype");
if (!name.val() || name.val().length < 6)
name.addClass("border-danger");
$("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
status = false;
else
name.removeClass("border-danger");
$("#u_error").html("");
status = true;
console.log(status)
)
)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<!--Include Navbar -->
<?php include_once("./templates/header.php");?>
<div class="container">
<div class="card mx-auto" style="width: 30rem; ">
<div class="card-header">Register</div>
<div class="card-body">
<form id="registration_form" onsubmit="return false" autocomplete="off">
<!-- Full Name -->
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
<small id="u_error" class="form-text text-muted">
</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!--Password 1-->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
<small id="p1_error" class="form-text text-muted"></small>
</div>
<!-- Password 2 -->
<div class="form-group">
<label for="password2">Re-enter Password</label>
<input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
<small id="p2_error" class="form-text text-muted"></small>
</div>
<!-- User type -->
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" id="usertype">
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">User</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
<button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span> Register</button>
<span><a href="index.php">Login</a></span>
</form>
</div>
<!-- Forgot Password? -->
<!--
<div class="card-footer text-muted" >
<a href="#">Forgot Password?</a>
</div> -->
</div>
</div>
<body>
</html>【讨论】：
非常感谢您的帮助。代码中的fullName 和 full_name 差异发生在我认为 JQuery 由于这种情况而无法工作时，我将其从 full_name 更改为 fullName 。路径../js/main.js 也发生了同样的事情。我试图调试它，并将它从./js/main.js 更改为../js/main.js。我也忘记还原了。这是文件路径C:\wamp64real\wamp64\www\inventory_blessed\public_html\js\main.js 我已经更改了我的 IF 语句和文件路径但它不起作用。我想知道为什么它在 JSFiddle 和 *** 中有效，但在 WAMP 上无效。
@Timothy 我的本地 wamp64 服务器中只有您的代码和 main.js - 一切正常。我已经编辑了我的答案并为您添加了一些信息。请遵循完全相同的结构，一切都应该很好。
感谢您的帮助。这些文件路径可能有点棘手。我将它从 <script src="./js/main.js"></script> 更改为 <script src="js/main.js"></script> 并且它有效。再次感谢@AlwaysHelping
@Timothy 很高兴我能提供帮助。请接受我的回答作为解决方案，不要忘记投票，这样它也可以帮助其他人。谢谢:)
@Timothy 我已经对你的问题投了赞成票。您可以单击我的答案中的勾选 ✅ 标记并为我的答案投票，请按我的答案旁边的灰色勾号或按照本指南了解如何将答案标记为解决方案：***.com/help/someone-answers【参考方案2】：
我认为问题是，您没有在<script type="text/javascript" src="../js/main.js"></script> 行加载main.js 文件的正确路径。我猜你的文件夹结构是这样的：
你的文件夹：
-----| js
---------| main.js
-----|查看文件夹
---------| index.html
使用您当前的代码，您现在面临的问题可能是您正在使用虚拟本地喜欢www.localhost.com/view_folder/index.html 我想
所以解决办法是，你应该尝试改变路径
从".../js/main.js"到"/js/main.js"，为了告诉浏览器调用“www.localhost.com/js/main.js”，
为了不遇到路径相关的bug，建议不要在文件中使用../..或./script标签或link标签，改用/file.js或file.js。
../js/main是相对路径，所以只有当你打开的文件也是相对路径时（比如双击html文件或者直接打开文件）才可以正常工作。 html文件中包含的所有文件路径都不应该这样使用，因为域有时可能不同。
要知道你的js file路径是对是错，只需尝试在DevTools中打开dom，然后右键，打开src="../js/main.js"的链接。
希望对您有所帮助！
【讨论】：
感谢您的帮助。我修复了路径问题，但它仍然无法正常工作。这是我的文件路径C:\wamp64real\wamp64\www\inventory_blessed\public_html\js\main.js。一切都在 JSFiddle 和 *** 上完美运行，但在我的 WAMP 上不起作用。任何想法为什么？
能否提供更新代码后的路径？你检查路径是否正确？
感谢@ThienHuynh，@AlwaysHelping 帮助我解决了这个问题。我将它从 <script src="./js/main.js"></script> 更改为 <script src="js/main.js"></script> 并且它有效。感谢您的帮助。【参考方案3】：
你可以尝试这样做
$('#full_name').on('change', function()
if ($('#full_name').length <6)
$('#full_name').addClass('border-danger');
);
【讨论】：
一个好的答案包括解释您所做的更改、它解决了什么问题以及原因。以上是关于JQuery 表单验证在开发浏览器上不起作用的主要内容，如果未能解决你的问题，请参考以下文章