使用从 onsubmit 调用的 ajax 进行表单验证答案

【问题标题】：Form validation with ajax called from onsubmit使用从 onsubmit 调用的 ajax 进行表单验证
【发布时间】：2018-12-23 21:12:57
【问题描述】：

我正在尝试通过检查用户 IP 地址是否已存在于我的数据库中来使用 ajax 验证注册表单。

实际问题依赖于自动提交表单，与我的 if 语句在 ajax 调用的成功处理程序中是真还是假无关。我知道 ajax 调用是异步执行的，并且可能在 if 语句之前执行了表单，但我不知道如何解决这个问题。

<form id="form" action="/chat/register" method="post" class="form-horizontal" role="form" onSubmit="return do_validation(this);">

ajax 调用：

function do_validation() {
    var data = {
        "action": "check",
        "username": username,
        "password": password,
        "confirm_password": confirm_password,
        "email": email
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "uservisit.php", //Relative or absolute path to response.php file
        data: data,
        success: function(data) {
            if (data["ip_address"] === 0) {
                return true;
            }else{
                alert(data["ip_address"] + "\n"  + data["username"] + "\n" + data["password"] + "\n" + data["confirm_password"] + "\n" + data[$
                return false;
            }
        }
    }); return false;
}

data["ip_address"] 提供正确的信息，如果我将 ip 存储在数据库中，我会收到 1 警报，如果不是 0。

【问题讨论】：

您的 ip-validation 似乎已经开始工作了？由于数据存在于数据库中，您必须提交它以检查 ip？如果验证通过，您可以进行另一个 ajax 调用，否则给出错误消息或类似消息。

标签： jquery ajax forms onsubmit

【解决方案1】：

我有一个可行的解决方案，但它可能不是最好的

var retValue = false;
var data = {
  "action": "check",
  "username": username,
  "password": password,
  "confirm_password": confirm_password,
  "email": email
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
  global: false,
  type: "POST",
  dataType: "json",
  url: "uservisit.php", //Relative or absolute path to response.php file
  data: data,
  async: false,
  success: function(data) {
    if (data["ip_address"] === 0) { 
      retValue = true;
    }else{  
      alert(data["ip_address"] + "\n"  + data["username"] + "\n" + data["password"] + "\n" + data["confirm_password"] + "\n" + data["email"] + "\n" + data["visitlasttime"]);
      retValue = false;
   } console.log(retValue);
  }
 });
 }// End else
console.log(retValue);
return retValue;

【讨论】：