如何使用Javascript驗證用戶名？

Question

我想知道如何使用Javascript驗證用戶在創建帳戶時輸入的任何用戶名是否已經存在於數據庫中，並要求用戶鍵入其他任何用戶名？

Answer 1

1. 為<input />元素的blur事件附加偵聽器。
2. 使用AJAX向服務器發送請求（以字段值作為參數）
3. 在服務器端檢查給定的用戶名是否已在使用中
4. 根據服務器的響應顯示（或不顯示） 此用戶名已被使用

jQuery（對於純JS我太懶了）+ PHP示例代碼：

<form ...>
    ...
    <input type="text" name="username" id="input-username" />
    <p class="error"></p>
    ...

$("#input-username").blur(function() {
    $.post("/check-username.php", { username: $(this).val() }, function(data) {
        if ("0" == data) { /* username in use */
             $(this).next("p").text("This username is already in use.</p>");
        } else {           /* username is fine */
             $(this).next("p").empty();
        }
    });
});

<?php

$username = $_POST['username'];

// check whether given username exists in database
$usernameExists = ...;

echo $usernameExists ? '0' : '1'; // 0 if exists, 1 if not.

Answer 2

答案是AJAX。 如果必須針對數據庫進行驗證，則需要調用服務器。 無需重新加載頁面即可執行此操作的唯一方法（ 編輯 ：正確）是AJAX。 如何實現它取決於您使用的是什么JavaScript庫（如果有）以及您的服務器是什么樣的。 我建議您進行一些搜索和閱讀-這是一個非常常見的用例。

Answer 3

就個人而言，我將使用JQuery驗證插件只是為了使事情變得簡單。 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

但通常，它會包含一個使用用戶名的服務器（即JSON對象）對服務器的小型AJAX請求，並在您的數據庫中執行“搜索”，並在用戶在文本字段中按Enter或Tab鍵后返回true / false（附加事件監聽器）。 然后，在您的回調響應中，更改您選擇的DOM元素，以向您的用戶指示該帳戶名是否已存在於數據庫中。

Answer 4

由於用戶名通常是公共的，因此Ajax可能不是唯一的解決方案。 一種簡單的方法是僅在某個時候擁有一個RDF / XML文檔（該文檔會隨着添加的每個新用戶而更新），其中包含您網站上所有用戶的列表，您可以輕松地使用Javascript DOM來遍歷該用戶已在使用中。 您還讓他們支付計算能力，而不是您自己，這取決於您的好壞，這是優勢還是劣勢。