小贝子编程

Jquery Ajax on-focusout on-submit - 需要 2 次点击



你好，我有一个jquery和ajax验证表单，当你填写值(错误的值)x@x.com 并1111111密码时，它会给ajax验证通知(这很好)，但之后如果你输入值(正确的值)example@example.com 并12345678它需要两次点击提交。这意味着如果您先输入错误的值，然后输入正确的值，则需要单击两次才能提交。以下是代码。我已经设置了下面的代码，以便您可以将代码复制并粘贴到文件(之前给出的文件名)中，您将有一个可以使用的工作模型。 我已经对 php 验证文件进行了硬编码，以便你们可以复制和粘贴代码并查看它是如何工作的。

索引.php

<?php 
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post" name="loginform" action="success.php">
<input type="email" class="homepage"  name="user_email2" id="user_email2" placeholder="Email" maxlength="50" required />
<div class ="errormsg" id ="errormsg6"></div>
<input type="password" class="homepage"  name="user_password2" id="user_password2" placeholder="Password" maxlength="20" required />
<div class ="errormsg" id ="errormsg7"></div>
<input type="submit" name="login" id="login" value="Submit">
<div class ="errormsglast" id ="errormsg8"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="validatelogin.js"></script> 
</body>
</html>

验证登录.js

$(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();
var item5 = item5.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: '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();
var item5 = item5.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: "validatelogin.php?f=2",
data: "user_email2=" + item5 + "&user_password2=" + item6,
success: function(msg)
{
if (msg == "WrongPw")
{
user_passwordajax2 = "";
$("#errormsg7").html("Wrong 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);
$("#login").on('click', validate_email_login);
$("#login").on('click', validate_password_login);
/* ----------------- Stop on Submit */
$("#login").on('click', function()
{
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;
}
});
});

验证登录.php

<?php
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
if($_GET['f']==1) {
if(isset($_POST['user_email2'])) {
$user_email2 = strtolower($_POST['user_email2']);
if($user_email2 == "example@example.com") {
echo "exists";
} else {
echo "ok";  
} 
}
}
if($_GET['f']==2) { 
if(isset($_POST['user_email2'], $_POST['user_password2'] )) {
$user_email2 = strtolower($_POST['user_email2']);
$user_password2 = $_POST['user_password2']; 
if($user_email2!="example@example.com" and $user_password2!="12345678") {
echo "WrongPw";
} elseif($user_email2=="example@example.com" and $user_password2=="12345678") {
echo "CorrectPw";
}
}
}   
?>

成功.php

<?php
echo "Login Successful";
?>

尝试的解决方案1.在提交按钮上设置延迟 2. 使用键控而不是在聚焦输出时(这有效，但不是必需的) 3. 延迟 keyup(无法让它与 ajax 一起工作 - 但它更接近我的需求，但不完全是我需要的 4. 触发点击提交返回 ajax 的 true(也不起作用)

我需要一些JavaScript专家来研究它并给我解决方案。

好吧，我不想粗鲁，但所有这些代码都有点灾难。您调用单击函数 3 次不同的时间，每次表单更改和提交时都会对服务器进行 ajax 调用。然后，您实际上是在为实际的提交函数进行两个单独的 ajax 调用。

下面的代码要紧凑得多，只进行一次 ajax 调用并且应该可以工作。我将在每个代码块之前进行一些解释

您的表单添加一个 id，以便 jQuery 可以在 ajax 调用中使用序列化

<form method="post" id="loginform" name="loginform" action="success.php">
<input type="email" class="homepage"  name="user_email2" id="user_email2" placeholder="Email" maxlength="50" required />
<div class ="errormsg" id ="errormsg6"></div>
<input type="password" class="homepage"  name="user_password2" id="user_password2" placeholder="Password" maxlength="20" required />
<div class ="errormsg" id ="errormsg7"></div>
<input type="submit" name="login" id="login" value="Submit">
<div class ="errormsglast" id ="errormsg8"></div>
</form>

验证登录.php- 这应该只是对服务器的一次调用，在一个函数中执行两个功能，将数据作为 json 返回而不是回显单个值，这样您就可以返回一个可以在 jQuery 代码中解析的对象。

<?php
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
if(isset($_POST['user_email2'], $_POST['user_password2'] )) {
$user_password2 = $_POST['user_password2']; 
$user_email2 = strtolower($_POST['user_email2']);
if($user_email2 != "example@example.com") {
$data['email_check'] = 'false';
} else {
$data['email_check'] = 'true';
} 
$data = array;
if($user_email2!="example@example.com" && $user_password2!="12345678") {
$data['password_check'] = 'false';
} else {
$data['password_check'] = 'true';
}
}
print(json_encode($data));

jQuery- 我不太确定你为什么要在模糊和点击次数上调用所有这些函数。只需在单击时调用验证电子邮件，如果通过，请继续验证密码，如果通过，它会进行 ajax 调用以实际检查服务器的详细信息。

还要避免使用像 item5、errormsg6 这样的变量名称，对另一个开发人员来说没有任何意义，而且在 6 个月内也不会对你说。并且不要告诉人们哪个元素是错误的，即"密码不正确"只是为了安全起见，只需告诉他们他们的登录详细信息是错误的。

$(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 email = $("#user_email2").val().toLowerCase();
var errors = [];
if (email.length < 6 || email.length > 50) {
errors.push("Email : 6 - 50 Characters<br>");
} 
if (!emailformat.test(email)) {
errors.push("Wrong Email Format");
} 
if( errors.length > 0 ) {
$("#errormsg6").html(errors);
return false;
}
$("#errormsg6").html();
validate_password_login();
}
/* ----------------- Define Validate Password */
var validate_password_login = function() {
var item6 = $("#user_password2").val();
if (item6.length < 8 || item6.length > 20) {
$("#errormsg7").html("Password : 8-20 Characters");
return false;
}
$("#errormsg7").html("");
submitForm();
}
var submitForm = function() {
$.ajax({
type: 'POST',
url: 'validatelogin.php',
dataType: "json",
data: $("#loginform").serialize(), 
success: function(msg) {
if(msg.email_check == 'true' && msg.password_check == 'true') {
//do whatever it is you want to do on correct login here
} else {
$("#errormsg6").html("Your login details are incorrect, please check and try again");
}
}
});
}

/* ----------------- Stop on Submit */
$("#login").on('click', function() {
errors = [];
if(validate_email_login() == true) {
alert("hi");
}
});
});

你可以在这里看到jQuery端的错误验证：https://jsfiddle.net/calder12/3fhvpenr/

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium