Question

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

说我有以下用户名字段：

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

如何将该功能添加到此字段？

Answer 1

您必须在ajax事件上发出textbox次请求。编写ajax函数并使用user_controller http方法向您GET添加新功能，并返回适当的响应以检查您的用户名的可用性。

Answer 2

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

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

在类型为new的{{1}}文件上创建routes.rb路线。在该方法中，使用GET访问键入的名称，然后检查是否存在。然后做你想做的事。

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

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

3 个答案: