Question

我想对我的登录表单进行实时验证。我这样的表单布局

用户名_____________

密码_____________

                 Submit

当用户输入与username匹配的有效database时，我想在表单末尾输入green check mark

OR红色x mark反之亦然。

在用户点击submit之前，他们会知道会发生什么。

我发现这个功能确实很有用，即使像苹果这样的大型网站也会使用它的部分网站。所以有人可以告诉我如何实现这一目标。

巨大的thanks来自这篇文章的英雄！

Answer 1

您想在keyup上提交您的表单（最有可能是ajax），这会检查您的数据库是否存在

$("input[type=text]").keyup(function(){
   //submit your form    
});

FIDDLE

Answer 2

在相应输入字段的focusOut事件上运行您的用户名和密码的查询，并在ajax函数的回调中将所需的类添加到有问题的输入

$("#usernameInput").focusout(function(){
   //here goes your query to the database
$.post('functlions.php', { user:$("#username").val()},
    function(data){
        if(data == true){
          $("#username").addClass("check");
        }else if(data == false){
          $("#username").addClass("red");
        }
    }
);

});

如何在表单上进行实时验证？

2 个答案: