如何在不发布表单的情况下检查表单中的重复用户名,并将焦点设置为用户名(如果已存在)?

时间:2012-12-04 10:04:39

标签: php javascript ajax html5

我有一个表格由用户填写。其用户注册表。我希望当用户填写用户名文本时,我的表单应该搜索用户名是否存在。如果存在,那么用户名文本字段应该得到焦点。我的数据库表名是用户,它包含名为id,username,password的列,状态。 这是我的代码。

<form name="user" action="#" method="post">
    <label>Username</label>
    <input type="text" maxlength="25" name="username" />
    /*here i want to check from my db table weather username exists or not*/
    <label>Password</label>
    <input type="password" maxlength="25" name="password" />
    <input type="submit" value="Submit" />
</form>

我可以在用户提交表单时执行此操作。但我的要求是在不提交表单的情况下检查值,并且用户名应该获得焦点。 在PHP中我有以下代码

<?php
    mysql_connect("localhost","root","") or die(mysql_error());

    mysql_select_db("test") or die(mysql_error());
    $username = $_REQUEST['username'];
    $query=mysql_query("SELECT * from user where name='$username'");
    $row=mysql_num_rows($query);
    if($row==1){
        echo "true";
    } else {
        echo "false";
    }
?>

5 个答案:

答案 0 :(得分:3)

向您的服务器端脚本发出ajax请求,该脚本对数据库进行检查并返回您可以解释的内容。然后在ajax成功响应上采取行动(聚焦该领域)。

网上有成千上万的这样的例子。查看@danish hashmi的示例(http://blog.webwizo.com/2011/06/03/check-username-availability-in-php-with-jquery-ajax/)或google for more。

答案 1 :(得分:2)

Html表格

<form method="post" action="register.php">
    ......
    <label for="username">Username</label>
    <input type="text" maxlength="25" name="username" id="username">
    ......
</form>

的js

<script src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
    $('#username').keyup(check_username); //use keyup,blur, or change
});
function check_username(){
    var username = $('#username').val();
    jQuery.ajax({
            type: 'POST',
            url: 'check_username.php',
            data: 'username='+ username,
            cache: false,
            success: function(response){
                if(response == 0){
                   alert('available')
                }
                else {
                     alert('not available')
                     //do perform other actions like displaying error messages etc.,
                }
            }
        });
}
</script>

check_username.php中编写你的表用户名,这个php的响应是带有提供的用户名的行数,如下所示

<?php
    /*** mysql hostname ***/
    $hostname = 'localhost';

    /*** mysql username ***/
    $username = 'username';

    /*** mysql password ***/
    $password = 'password';

    /*** mysql databse ***/
    $dbname = 'database';

    try 
    {
        $dbh = new PDO("mysql:host=$hostname;dbname=mysql", $username, $password);
        /*** echo a message saying we have connected ***/
        //echo 'Connected to database';
    }
    catch(PDOException $e)
    {
        echo $e->getMessage();
    }   

    $stmt = $dbh->prepare("SELECT * FROM user where name = ?");
    $stmt->execute(array($_POST['username']));
    echo $stmt->rowCount();
?>

答案 2 :(得分:0)

我在考虑你绑定检查你的name =“username”字段的keyup事件上是否存在用户(应该给出一个id)。你使用jquery或任何其他库js?
实现计划使用库的目的要简单得多。

答案 3 :(得分:0)

为此,您可以在更改事件上设置文本框,并将文本框值传递给ajax调用,如下所示 input type="text" id="username"

现在在js文件中添加以下代码。


$(document).ready(function(){
  $(#username).change(function(e)
  {
    e.preventDefault();
    $.ajax({
       url : 'youphpfile.php?username='+$(#username).val();,
//or $(#username).attr('value') dataType: 'json', success : function() {} }); }); });

现在在youphpfile.php文件中检查已发送的用户名参数。

$username = $_REQUEST['username']; // $_GET['username']; get will be good for faster response.

mysql_connect

and check username

你做完了。 欢呼声。

答案 4 :(得分:0)

您可能需要一个Web服务来检查用户名是否存在以及当用户名字段失去焦点时,使用jQuery对服务进行ajax调用。

$(document).ready(function(){
    $('input[name="username"]').blur(function(){
        var txt = $(this);
        var username = txt.val();
        $.ajax({
            type: "POST",
            url: "myUsernameService.php",
            data: { uname: username }
        }).done(function(res) {
            if (res == "false"){
                txt.removeClass("valid").addClass("invalid");
            } else {
                txt.removeClass("invalid").addClass("valid");
            }
        });
    });
});

我不建议再次关注用户名文本框,因为AJAX调用可能需要几秒钟才能返回一个值,此时用户可能正在忙于输入另一个字段。

上面的代码假设您在“myUsernameService.php”上有一个方法,该方法接受一个名为“uname”的变量,并返回一个字符串“true”或“false”。