在JS客户端表单验证联系服务器

我有一个HTML表单。我已经在做一个客户端的HTML。现在在JS客户端表单验证联系服务器

<form id='myForm' onsubmit='return myFormValidation()'> 
     ... 
    </form>

，在myFormValidation功能，确保之后的客户端就OK了，真的提交表单之前，我想也是这样做的服务器端表单验证。我正在使用JQuery。于是，我改变了我的功能是这样的：

function myFormValidation(){ 
    //first, client side validation 
    ... 
    //then, server side validation 
    $.post(url_of_server_side, $("#myform").serialize(), function(json) { 
    data = JSON.parse(json); 
    if(!data.ok) 
    { 
     $("#msg").text("some error"); 
    } 
    else 
    { 
     $("#myForm").submit();//Oops! 
    } 
    }); 
    return false; 
}

但形式的“提交”功能的行为就像一个递归函数，并试图再次验证表单！我应该在调用提交之前禁用验证功能吗？或者，我想，对于我的问题有一个更好的方法（与此稍有甚至完全不同）？

来源

2017-06-03 Akhir

我发现了一个间接的“解决方案”：除了正常后，我做同步后。这样，我可以摆脱提交电话！ – Akhir

我会建议，如果所有的数据都没问题，服务器端脚本就可以执行所需的操作，例如保存到数据库。这样，如果一切正确，你就不需要第二个表格。如果有什么不对，显然，检查必须在第二次进行。

来源

2017-06-03 11:27:00

对不起，你能解释一下吗？你建议我不做服务器端验证？ – Akhir

你写的是if（error）then show error else resubmit（）; 如果一切正确，为什么不在一个步骤中保存数据并向用户显示OK？ –

您是对的。如果我使用同步ajax post（我在我的问题下写的评论），这是真实的，但正如我在我的问题中写的，这篇文章是异步的，并且你所说的事情是不可能的。 – Akhir

如果您需要服务器端验证，您应该扩展您的“保存”enpoint以支持正确的响应状态代码，并且不要使用单独的“验证”url。使用单个URL不同响应类型：

200（成功） - 数据保存成功
400（错误请求） - 输入数据是不正确的。作为响应消息，您可以包含将显示给用户的“验证结果”消息。

所以，你的代码可以看起来像

$.post(url_of_server_side, $("#myform").serialize()) 
    .done(function() { 
    //show some success confirmation or redirect to main page 
    }).fail(function(xhr, status, error) { 
    $("#msg").text(error.message); 
    });

来源

2017-06-03 11:48:54 VadimB

谢谢。这是安静的帮助。但我抽象了我的例子。在服务器端验证中，我还生成一些额外的信息（如消息）以显示给用户。有了这个400状态，我无法将这个信息传递给客户端。 – Akhir

您可以根据需要使用任何JSON作为响应。并包含您需要显示的其他属性。不仅“消息”。一些更复杂的对象。 – VadimB

@thanx您的帮助！ – Akhir

在JS客户端表单验证联系服务器

回答

相关问题