如何在输入时检查用户名是否被使用？

Question

许多受欢迎的网站都有一个用户名字段，根据用户输入的字符是否与已经存在的用户相对应，通常会在用户键入新字符时变为红色或蓝色。

说我有以下的用户名字段：

<%= f.text_field :username, id:"username" %> 

怎么可能的功能被加入到这个领域？

Answer 1

您必须在textbox事件上触发ajax请求。 写ajax函数并为您添加新函数user_controller用GET http方法并返回合适的响应以检查您的用户名的可用性。

Answer 2

在写入文本框时触发ajax请求。像：

$("#username").keyup(function() { 
    $.ajax({ 
     type: "GET", 
     url: '<%= username_availability_path %>', # replace by your route 
     data: {name: $('#username').prop('value')} 
    }); 
}); 

创建您routes.rb文件，GET类型new路线。在该方法中使用params[:name]访问键入的名称，然后检查是否存在。然后做你想做的。

Answer 3

而不是检查用户名和每一个关键制作要求的，可以使用blur方法一旦用户离开的用户名外地来检查用户名，否则你需要在每一个关键，你可以使用keyup本身，

你的JavaScript，

$("#username").keyup(function() { # you can also try, $("#username").blur(function() { 
    $.ajax({ 
     url: '<%= check_duplicate_username_path %>', # your own route 
     type: "GET", 
     data: { username: $('#username').val() }, // This goes to Controller in params hash, i.e. params[:username] 
     complete: function() {}, 
     success: function(data, textStatus, xhr) { 
        // do something with your returned data // 
        if (data.available == false) 
        { 
        $('#username').addClass("error"); // style the class with your required css 
        } 
       }, 
     error: function() { 
      alert("Your Ajax error! message") 
     } 
    }); 
}); 

路线可以作为，

get '/check_duplicate_username' => 'users#check_duplicate_username', as: :check_duplicate_username 

控制器动作可以是这样的，

def check_duplicate_username 
     @user = User.where('username = ?',params[:username]).first 
     if @user.present? 
     render json: {:success => 0, :message => 'User exists', :user_available => true} 
     else 
     render json: {:success => 1, :message => 'User Does not exist', :user_available => false} 
     end 
end