你好我有一个登录验证表单，它使用jquery和ajax的混合来进行验证...如果值是正确的，表单应该提交，如果值不正确那么表单不应该提交...但是在我的情况下，表格即使在值不正确时提交（我正在使用mousedown函数），请参阅下面的代码..
<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。 ..它应该在第一次返回时返回
<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();
}
});
});
答案 0 :(得分：2)
而不是类型=＆＃34;提交＆＃34;按钮只有一个普通按钮，例如<input type="button" name="login" id="login" value="Submit">。然后，当您完成检查值并感到满意时，应该发送，然后调用：
$('[name=loginform]').submit();
因为当前正在发生的是当您单击按钮时表单提交，因为您没有停止发生该事件。
如果您想阻止表单提交，我建议您不要像我上面提到的那样使用该按钮并自行启动提交，或者您可以使用onsubmit =＆＃34; someFunction（）＆＃34;在表单元素的方式上，如果它不应该提交则返回false，如果它应该返回true。
答案 1 :(得分：1)
我会说你的代码有一些问题和一些不好的做法。 我看到你正在努力学习JS，所以原谅我没有直接解决你的问题，而是给你一些指导并指出你的一些最佳实践。
好像你正在做一个登录表单。我会说大多数检查不应该发生在客户端，而应该发生在服务器上。 当用户注册时，也可以明智地检查客户端上的用户名长度，并提示用户他不能使用他想要注册的用户名，但在登录期间，我可以登录所有客户端不
您的代码似乎存在两个严重的安全问题
您应该缓存DOM元素 所以不要在主函数范围集中一直调用$（＆＃39;＃id＆＃39;）
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
})
}
});
});