Question

继续AJAX live checking availability with submit button＆amp;＆amp; 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]也将提交表格我不希望在我的网页上运行多个提交表单。

有没有办法以单一提交形式满足我的要求？
有人可以帮助我吗？

Answer 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值
    - $("#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 } }); });

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

1 个答案: