使用 JQuery、Ajax、PHP、Json 进行表单验证

Posted 2023-05-08

【中文标题】使用 JQuery、Ajax、PHP、Json 进行表单验证

【英文标题】：Form validation using JQuery, Ajax, PHP, Json

【发布时间】：2016-04-22 23:30:08

【问题描述】：

我正在尝试验证用户在字段中输入的值。

我遇到了关于电子邮件字段和电子邮件确认字段的问题。

我如何进行；

用户输入他的电子邮件地址，触发OnFocus 和OnChange 事件。但是浏览器倾向于自动填充电子邮件确认字段，从而触发OnChange事件。

所以发生的情况是，在第一个字段中键入的电子邮件被发送到服务器以验证它并检查它是否已经在数据库中。如果这封电子邮件通过了所有测试，我会将其存储在一个临时的$_SESSION[$tmp_var] 中。但是，由于自动填充，电子邮件确认字段会同时触发，并且有时会到达服务器以与 $_SESSION[$tmp_var] 进行比较，因为过程有点长，所以并不总是设置。

我知道autofill="off" 属性不是一个选项。 我使用 $_SESSION[$tmp_var] 是因为非 javascript 用户可以在出现错误时重新加载页面，并且该字段已填充此内容，因此他们不必重新输入其值。

我想保留表单的自动填写功能，因为它可以节省用户的时间。

这是我将 json 数组发送到 php 的 JQuery；

$("body").on("focusout change", "input, select", function () 
    var id = ($(this).attr("id"));
    var container = ['#' + id + "_ck", '#' + id + '_err'];
    var data_type = ($(this).attr("data-type"));
    var text = document.getElementById(id).value;
    $.ajax(
        url: 'ajax-php.php',
        type: 'post',
        dataType: 'json',
        data:  'action': 'input_ck', 'id': id, 'text': text, 'data_type': data_type ,
        success: function (data, status) 
                if (data[2] == 'true') 
                     $(container[1]).addClass("err_f");
                     $(container[1]).html(data[1]);
                     $(container[0]).html(data[0]);
                      
                if (data[2] == 'false')  
                     $(container[1]).addClass("pass_f"); 
                     $(container[1]).html('Valeur acceptée.');
                     $(container[0]).html(data[0]);
                
        ,
        error: function (xhr, desc, err) 
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        
    ); 
);      

我想到的第一件事就是截取email确认的字段id，并与email字段值进行比较

或者以某种方式等待一个查询成功结束，然后再执行另一个查询，这样电子邮件和电子邮件确认字段就不会同时发送；

有什么建议吗？

【问题讨论】：

每次输入更改/失去焦点时触发 ajax 请求并不是最好的主意。您应该考虑在客户端验证这些，并在提交表单时以正确的顺序执行所有服务器端检查。

在实践中，电子邮件确认字段验证通常仅在客户端完成。由于用户行为不可预测，一旦在生产环境中绑定焦点更改将引入许多问题。我的建议是创建带有漂亮按钮的表单，当用户单击按钮时对数据进行一些健全性验证，然后发布到服务器以检查数据库中是否存在电子邮件。

其实你应该只关心原始邮件。我的意思是，这是唯一需要在后端检查的。确认单应仅与原始单核对。因此，在 JS 中，一旦填充了该字段，您就可以将其与原始字段进行对比。如果相同，那么您的第一个标志为真（电子邮件 A === 电子邮件 B），那么您需要知道第一个标志是否有效，这就是后端将验证的内容。验证后，您将设置第二个标志（电子邮件 A 有效）。如果两个布尔值都为真，那么您应该能够继续。

谢谢你们，这是个好主意，因为我已经为非 Java 浏览器准备好了所有服务器端，我将把大部分 javascript 保留在客户端，毕竟这就是 Java 存在的原因！跨度>

【参考方案1】：

如果您想坚持使用现有代码，一些小的更改将解决您的问题。在ajax请求的成功函数中添加一个空字段值的额外输入字段并用一些会话变量输出填充它。

在success函数中检查输入字段的值，直到得到一个值，使用setTimeout循环，这样就可以让ajax请求等到php脚本的处理完成。

【讨论】：

谢谢，这是个好主意，我将使用隐藏字段将检查值发送到服务器。我不需要担心用户通过向服务器发布权限来跳过此验证，因为服务器端验证已经实现。