AJAX 使用提交按钮实时检查可用性（第 3 部分）答案

【问题标题】：AJAX live checking availability with submit button (part 3)AJAX 使用提交按钮实时检查可用性（第 3 部分）
【发布时间】：2016-07-31 14:45:08
【问题描述】：

继续AJAX live checking availability with submit button && AJAX live checking availability with submit button (part 2)

functions.php

<?php
function AddUserForm()
{
?>
    <form id="adduser" name="adduser" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    Username: <input type="text" id="username" name="username" size="30" maxlength="50" /><span id="usernameCheck"></span><br /><br />
    <input type="submit" name="submit" value="Add User" />
    <input type="reset" name="reset" value="Reset" />
    </form> 

    <script language="JavaScript" type="text/javascript">
    var frmvalidator = new Validator("adduser");
    frmvalidator.addValidation("username","req","Please fill up the username.");
    </script>
<?php
}
?>

adduser.php

<?php
include_once('functions.php');
?>

<html>
<head>
<script language="JavaScript" src="formvalidator2.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"> </script>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(document).ready(function(){
    var a = false;

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

         if(userName == "")
        {
             $("#usernameCheck").empty();
         }
         else
         {
             $.post("getUserName.php", {userName: userName}, function (data) 
             {
                 a = data; 
                 $("#usernameCheck").html(data);
             });
         }
    }); 

    //---[1]---
    $('#adduser').submit(function(){
        return a == 'username valid';             
    });
});
</script>   
</head>

<body>
<?php
AddUserForm();

//---[2]---
if(isset($_POST['submit']) && ($_POST['submit'] == 'Add User'))
{
    echo $_POST['username'];
}
?>
</body>
</html>

getUserName.php

<?php
$dbc = mysqli_connect('localhost', 'root', '', 'usertest') OR  die(mysqli_connect_error());

$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 'username invalid';
}
else
{
     echo 'username valid';
}
?>

这是我的预期输出：

这是我的要求：
(1) 如果用户不填写用户名
- 表单验证器会弹出消息“请填写用户名消息”。

(2)如果用户填写的用户名与数据库不同
- 在用户名字段旁边显示“用户名有效”。
- 单击“添加用户”按钮后将显示用户名。

(3)如果用户填写与数据库相同的用户名
- 在用户名字段旁边显示“用户名无效”。
- 点击“添加用户”按钮后不会提交表单。

从上面的代码中，我发现 [1] 会提交表单。
另一方面，[2] 也会提交表单。
我不想在我的网页中运行多个提交表单。

有什么方法可以满足我的单一提交表单的要求吗？
有人可以帮助我吗？

【问题讨论】：

标签： javascript php jquery mysql ajax

【解决方案1】：

有几个步骤可以达到您想要的功能...

监听用户名上的焦点事件

$("#username").on('focus', function() { // Insert Blur Listener Here // Insert Keyup Listener Here });
- 监听用户名字段的模糊事件
  - 确保用户名字段的值不等于“”
    - 如果等于“”，则禁用提交按钮
    - 如果它不等于“”，并且 AJAX 调用显示用户名可用...启用提交按钮
      
      $("#username").on('blur', function() { if( $(this).val() === "" ) { // If username value is empty SHOW ERROR $("#usernameCheck").html("Username Required!"); } else { // Username field NOT empty, check username availability var userInput = $(this).val(); $.ajax({ url : "getUserName.php", method : "POST", data : { userName : userInput }, success : function(response) { if( response.indexOf("invalid") >= 0 ) { $("#usernameCheck").html("Username Already In Use!"); // Username IS NOT available } else { // Username IS available $("#usernameCheck").html("Username Available!"); } }, error : function(error) { // Handle PHP script errors here } }); } });
- 在用户名字段上监听 keyup 事件
  - 利用 AJAX 调用在数据库中搜索用户名值
    - $("#username").on('keyup', function() { var userInput = $(this).val(); $.ajax({ url : "getUserName.php", method : "POST", data : { userName : userInput }, success : function(response) { if( response.indexOf("invalid") >= 0 ) { $("#usernameCheck").html("Username Already In Use!"); // Username IS NOT available } else { $("#usernameCheck").html("Username Available!"); // Username IS available } }, error : function(error) { // Handle PHP script errors here } }); });
监听 #addUser 表单上的提交事件，以执行最后一秒的可用性检查
- 阻止默认操作
- 运行 AJAX 调用
  - 在“有效”时，提交表单
  - 在“无效”上，显示某种错误。
- 这将用于用户重新加载页面并且用户名输入有值但没有集中注意力的情况
- 这还将捕获所有形式的提交（即点击、输入按键等） $("#addUser").on("submit", function(e) { e.preventDefault(); var userInput = $("#username").val(); $.ajax({ url : "getUserName.php", method : "POST", data : { userName : userInput }, success : function(response) { if( response.indexOf("invalid") >= 0 ) { $("#usernameCheck").html("Username Already In Use!"); } else { $("#addUser").submit(); } }, error : function(error) { // Handle PHP script errors here } }); });

【讨论】：