Question

test1.php

<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
       $('#username').change(function(){
            var userName = $('#username').val();

            $.post("getUserName.php", {userName: userName}, function(data){
                $("#userNameCheck").html(data);
            });
       }); 

       $('#submit').click(function(){
            //CODE HERE

       });
    });
</script>
</head>

<body>
<form action="" method="post" id="addform">
    Username: <input type="text" name="username" id="username" size="24" class="required" maxlength="22" />
    <div id="userNameCheck"></div>
    <input type="submit" id="submit" name="submit" value="ADD user" />
</form>
</body>
</html>

getUserName.php

<?php
include("db.php");

$userName = $_POST['userName'];
$q = "select user_name from user where user_name = '".$userName."'";
$r = mysqli_query($dbc, $q);

$num =  mysqli_num_rows($r);

if($num)
{
      echo '<div style="color:red">Username taken. Please type another new one.    
     </div>';
}
else
{
      echo '<div style="color:green">You can use it.</div>';
}
?>

数据库（用户表）

user_id user_name
1阿里
2 abu
从上面：
=＆GT;在文本框中输入“ ali ” - ＆gt;以“绿色”显示“你可以使用它” =＆GT;在文本框中输入 ahmad - ＆gt;以红色显示“Username taken ...”消息。
我的要求是如果邮件是“你可以使用它”，请转到test2.php;如果邮件是“Username taken ...”，则表单上没有提交。
我的问题是当我点击提交按钮时如何控制“你可以使用它”或“用户名截取”消息？

Answer 1

不使用按钮的单击处理程序，而是使用表单提交事件。

$(document).ready(function () {
    $('#username').change(function () {
        var userName = $('#username').val();

        $.post("getUserName.php", {
            userName: userName
        }, function (data) {
            $("#userNameCheck").html(data);
        });
    });

    $('#addform').submit(function () {
        //if the text is `You can use it` allow the form submit else block it
        return $("#userNameCheck").html().trim() == 'You can use it';
    });
});

还要确保在test2.php中进行相同的验证，因为客户端验证可以是侧面步骤。

使用提交按钮AJAX实时检查可用性

1 个答案: