你好，我有一个登录验证表单，它混合使用jquery和ajax进行验证...如果值正常，则表单应提交，如果值不正常，则表单不应提交...但是，就我而言，即使值不正确(我正在使用鼠标按下功能)，表单也会提交，请参阅下面的代码。
<form method="post" name="loginform" action="models/login.php">
<input type="email" class="homepage" name="user_email2" id="user_email2" placeholder="Email" maxlength="50" />
<div class="errormsg" id="errormsg6"></div>
<input type="password" class="homepage" name="user_password2" id="user_password2" placeholder="Password" maxlength="20" />
<div class="errormsg" id="errormsg7"></div>
<input type="submit" name="login" id="login" value="Submit">
<div class="errormsglast" id="errormsg8"></div>
</form>
jquery和ajax
$(document).ready(function()
{
/* ----------------- Login Validations Global Variables ----------------- */
var user_email2 = "";
var user_emailajax2 = "";
var user_password2 = "";
var user_passwordajax2 = "";
var emailformat = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/i);
/* ----------------- Define Validate Email */
var validate_email_login = function()
{
var item5 = $("#user_email2").val().toLowerCase();
if (item5.length < 6 || item5.length > 50)
{
$("#errormsg6").html("Email : 6 - 50 Characters");
user_email2 = "";
}
else
{
$("#errormsg6").html("");
user_email2 = item5;
if (!emailformat.test(item5))
{
$("#errormsg6").html("Wrong Email Format");
user_email2 = "";
}
else
{
$("#errormsg6").html("");
user_email2 = item5;
$.ajax(
{
type: 'POST',
url: 'classes/validatelogin.php?f=1',
data: "user_email2=" + item5,
success: function(msg)
{
if (msg == "ok")
{
user_emailajax2 = "";
$("#errormsg6").html("Email Does Not Exist");
}
else if (msg == "exists")
{
user_emailajax2 = item5;
$("#errormsg6").html("");
}
}
});
}
}
}
/* ----------------- Define Validate Password */
var validate_password_login = function()
{
var item5 = $("#user_email2").val().toLowerCase();
var item6 = $("#user_password2").val();
if (item6.length < 8 || item6.length > 20)
{
$("#errormsg7").html("Password : 8-20 Characters");
user_password2 = "";
}
else
{
$("#errormsg7").html("");
user_password2 = item6;
if (user_email2 != "" && user_emailajax2 != "")
{
$.ajax(
{
method: "POST",
url: "classes/validatelogin.php?f=2",
data: "user_email2=" + item5 + "&user_password2=" + item6,
success: function(msg)
{
if (msg == "WrongPw")
{
user_passwordajax2 = "";
$("#errormsg7").html("Wrong Password - See Forgot Password");
}
else if (msg == "CorrectPw")
{
user_passwordajax2 = item6;
$("#errormsg7").html("");
/* window.location.href="manage-properties"; */
}
}
});
}
}
}
/* ----------------- Run Functions */
$("#user_email2").on('focusout', validate_email_login);
$("#user_password2").on('focusout', validate_password_login);
/* ----------------- Stop on Submit */
$( "#login" ).mousedown(function()
{
validate_email_login();
validate_password_login();
if (user_email2 == "" || user_emailajax2 == "" || user_password2 == "" || user_passwordajax2 == "")
{
$("#errormsg8").html("Please Fill All Fields (Correctly)");
console.log("submit false");
return false;
}
else
{
$("#errormsg8").html("");
console.log("submit true");
return true;
}
});
});
解决方案已尝试- 问题是当用户输入错误的事件时，这很好，但是如果用户随后输入正确的值，则提交在第一次返回 false，然后第二次返回 true...它应该在第一次 GO 中返回 true
<input type="button" name="login" id="login" value="Submit">
$( "#login" ).mousedown(function()
{
validate_email_login();
validate_password_login();
if (user_email2 == "" || user_emailajax2 == "" || user_password2 == "" || user_passwordajax2 == "")
{
$("#errormsg8").html("Please Fill All Fields (Correctly)");
console.log("submit false");
return false;
}
else
{
$("#errormsg8").html("");
console.log("submit true");
$('[name=loginform]').submit();
}
});
});
而不是有一个 type="submit" 按钮，只需有一个普通的按钮，例如<input type="button" name="login" id="login" value="Submit">.然后，当您完成检查完值并很高兴它应该发送时，只需调用：
$('[name=loginform]').submit();
因为当前发生的事情是当您单击按钮时表单提交，因为您不会阻止该事件的发生。
如果你想阻止表单提交，我建议不要使用该按钮并像我上面提到的那样自己启动提交，或者你可以在表单元素上使用onsubmit="someFunction()"，如果它不应该提交，则返回false，如果应该提交，则返回true。
我会说你的代码有一些问题和一些不好的做法。 我看到您正在尝试学习JS，因此请原谅我没有直接解决您的问题，而是为您提供一些指示并指出一些最佳实践。
逻辑-
您似乎正在执行登录表单。我会说大多数检查不应该在客户端中进行，而应该在服务器上进行。 当用户注册时，明智的做法是检查客户端上的用户名长度，并提示用户他不能使用他想要注册的用户名，但在登录期间，所有客户关心的是我是否可以登录。
安全-
您的代码似乎有两个严重的安全问题
- 您可以使用"class/validatelogin.php？f=1"测试电子邮件/用户是否存在。 通常，您应该始终一起测试用户和密码(如果它们存在并且匹配用户应该能够登录)，否则登录应该失败。 您不应通知用户失败的原因(如果用户名不存在或存在但密码错误)。
- 您似乎没有在数据库中散列密码。我通过限制密码最大长度来假设它。让用户根据需要选择任意长的密码，并使用安全的哈希算法对其进行哈希处理(我建议使用bcrypt，但谷歌搜索并找到合适的密码)。我知道你只是在学习，但这非常重要，我认为哈希是处理用户登录时你需要学习的第一件事
与 DOM 合作。
你应该缓存你的 DOM 元素 所以而不是在主函数作用域集中一直调用 $('#id')
var emailInput = $("#user_email2"); function submitForm() { var email = emailInput.val().toLowerCase(); ... }您可能还应该设置元素的
text值，而不是现在html无关紧要，但是由于您正在设置文本值，因此它的良好做法将帮助您避免意外的注入和错误。由于您使用 ajax，因此即使验证成功，也不应让表单自行提交。
通用逻辑应打包到函数中并重用。
在很多地方，您的原始代码可以拆分为更短且可重用的函数
更好地处理异步代码
jQuery在使用ajax请求时支持Promise API，我宁愿使用它。您的原始代码有一些异步调用，如果您需要在它们之间同步，使用普通回调会很痛苦(这可能是导致您出现问题的原因)
这是使用我的建议的简化解决方案 -
$(document).ready(function() {
"use strict";
var emailInput = $("#user_email2"),
emailError = $("#errormsg6"),
passwordInput = $("#user_password2"),
passwordError = $("#errormsg7");
function required (value) {
if (value) {
return true;
} else {
return false;
}
//this is just to make the code clear you could use
//`return value ? true : false` or `return !!value`
}
$('form:eq(0)').on('submit', function (e) {
var valid = true,
email = emailInput.val(),
password = passwordInput.val();
e.preventDefault();
if ( !required(email) ) {
emailError.text('Email is required');
valid = false;
}
if ( !required(password) ) {
passwordError.text('Password is required');
valid = false;
}
if ( valid ) {
$.ajax({
method: "POST",
url: "login.php",
data: {
email: email,
password: password
}
}).done(function (data, textStatus, jqXHR) {
//redirect user to main page
}).fail(function (jqXHR, textStatus, errorThrown) {
//show the user the error
})
}
});
});