Question

我想知道如何使用Javascript验证如果用户在创建帐户时输入了任何用户名已存在于数据库中并要求用户键入任何其他用户名？

Answer 1

为blur元素附加<input />个事件的侦听器。
使用AJAX向服务器发送请求（以字段值作为参数）
在服务器端检查给定的用户名是否已被使用
基于服务器的响应显示（或不显示）此用户名已被使用消息

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。如果必须针对数据库进行验证，则需要调用服务器。在没有重新加载页面的情况下，唯一的方法（ EDIT ：正确）是AJAX。如何实现它将取决于您使用的javascript库，如果有，以及您的服务器是什么样的。我建议你做一些搜索和阅读 - 这是一个非常常见的用例。

Answer 3

就个人而言，我会使用JQuery验证插件来简化操作。 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

但一般情况下它会包含一个带有用户名的服务器（即JSON对象）的小型AJAX请求，并在数据库中执行“搜索”，并在用户点击输入或选项卡后返回true / false textfield（附加事件监听器）。然后在您的回调响应中更改您选择的DOM元素，以向您的用户指示帐户名是否已存在于数据库中。

Answer 4

Ajax可能不是唯一的解决方案，因为用户名通常是公共的。一个简单的方法就是在某个时刻只有一个RDF / XML文档（只需更新每个添加的新用户），其中包含您网站上所有用户的列表，您可以轻松地使用Javascript DOM遍历这些用户以查看该用户已在使用中。你也让他们支付计算能力，而不是你，取决于你有多好处，这是一种优势或不利。

如何使用Javascript验证用户名？

4 个答案: