时间戳

首页 > 解决方案 > 如何使用 JS 验证表单，然后使用 PHP 和 Ajax 验证表单？

javascript - 如何使用 JS 验证表单，然后使用 PHP 和 Ajax 验证表单？

问题描述

我有一个 HTML 表单，我正在使用 JavaScript 进行验证，如下面的代码。所有 JavasCript 代码都在app.js 文件中。

应用程序.js 文件

function validateForm () {

    var amount          =   document.forms["salesform"]["amount"];               
    var buyer           =   document.forms["salesform"]["buyer"];    
    var buyerRegex      =   /^[a-zA-Z0-9_ ]*$/;     
    var receipt_id      =   document.forms["salesform"]["receipt_id"];  
    var receiptIdRegex  =   /^[a-zA-Z_ ]*$/;        
    let items           = document.querySelectorAll(".items")
    var itemsRegex      =   /^[a-zA-Z_ ]*$/;
    var buyer_email     =   document.forms["salesform"]["buyer_email"];  
    var note            =   document.forms["salesform"]["note"];  
    var city            =   document.forms["salesform"]["city"];  
    var cityRegex       =   /^[a-zA-Z_ ]*$/;
    var phone           =   document.forms["salesform"]["phone"];
    var phoneRegex      =   /^[0-9]*$/;
    var entry_by        =   document.forms["salesform"]["entry_by"];
    var entryByRegex    =   /^[0-9]*$/;

    function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    if (amount.value == "") { 
        alert("Please enter the amount."); 
        amount.focus(); 
        return false; 
    } else if (isNaN(amount.value)) {
        alert("Amount must be only numeric value."); 
        amount.focus(); 
        return false; 
    } else if (amount.length > 10 ) {
        alert("Amount must be less than 10 characters long."); 
        amount.focus(); 
        return false; 
    }

    // more validation.....

    return true;
}

在这个文件中，我有另一个 jQuery Ajax 代码使用 Server 验证表单。所以我添加了以下 Ajax 代码来打击 JS 验证代码：

$("#salesForm").submit(function(e) {
    e.preventDefault();
    $.ajax({
        url : '../process/add-data.php',
        type: 'POST',
        dataType: "html",
        data : $(this).serialize(),     
        beforeSend : function () {
            $(".formResult").html("Please wait...");
        }, 
        success : function ( data ) {
            $(".formResult").html( data );
        }
    });
});

对于 HTML 表单 

<form name="salesform" id="salesForm" onsubmit="return validateForm();" method="POST">

现在，当表单使用 JavaScript 进行验证时，它也会使用 Ajax 验证表单。

但首先它应该使用 JavaScript 验证，然后是 Ajax。

标签： javascriptphpjqueryajax

解决方案

false您需要在回调内部返回beforeSend，如官方 jQuery 文档中所述：

beforeSend 类型：函数（jqXHR jqXHR，PlainObject 设置）

一个预请求回调函数，可用于在发送之前修改 jqXHR（在 jQuery 1.4.x 中为 XMLHTTPRequest）对象。使用它来设置自定义标题等。 jqXHR 和设置对象作为参数传递。这是一个 Ajax 事件。在 beforeSend 函数中返回 false 将取消请求。从 jQuery 1.5 开始，无论请求的类型如何，都将调用 beforeSend 选项。

所以，你需要做这样的事情：

beforeSend : function () {
    $(".formResult").html("Please wait...");
    if(!validateForm()) {
        // Here you remove your "Please wait..." message
        return false;
    }
    // Or simply return the value from validateForm():
    // return validateForm();
},

当然，onsubmit="return validateForm();"从你的表单标签中删除。

推荐阅读