检查用户名可用性

Question

我有一个用户登录表格：

<%= form_tag(@action, :method => "post", :name => 'signup' ,:onSubmit => 'return validate();') do %>    
  <%= label_tag(:user, "Username:") %>
  <%= text_field_tag(:user) %>

我想在：user-field 失去焦点之后立即检查数据库中是否有用户名。 我可以使用 javascript 在表单上覆盖此事件，但我无法从 javascipt 代码发送 Ruby-AJAX 请求。

有什么方法可以检查用户名而不在表单上添加额外的控件（按钮、链接）？

Answer 1

您可以使用一些 JavaScript （这是用 jQuery 编写的）来检查 AJAX ：

$(function() {
    $('[data-validate]').blur(function() {
        $this = $(this);
        $.get($this.data('validate'), {
            user: $this.val()
        }).success(function() {
            $this.removeClass('field_with_errors');
        }).error(function() {
            $this.addClass('field_with_errors');
        });
    });
});

此 JavaScript 将查找具有属性data-validate的任何字段。 然后它调用onBlur事件处理程序（焦点在 JavaScript 世界中丢失）。 模糊处理程序将向data-validate属性中指定的 URL 发送 AJAX 请求，并使用输入值传递参数user 。

接下来修改您的视图以添加属性data-validate和验证 URL：

<%= text_field_tag(:user, :'data-validate' => '/users/checkname') %>

接下来添加路线：

resources :users do
  collection do
    get 'checkname'
  end
end

最后一步创建您的验证：

class UsersController < ApplicationController
  def checkname
    if User.where('user = ?', params[:user]).count == 0
      render :nothing => true, :status => 200
    else
      render :nothing => true, :status => 409
    end
    return
  end

  #... other controller stuff
end

Answer 2

我在另一篇文章中回答了这个问题。

如果您不想使用现有的 jquery 插件从头开始编写，这是验证 forms 的一种友好方式。 看看，如果你喜欢，请告诉我！

在 rails 中使用 jquery 和 Ajax 检查用户名可用性

Answer 3

为什么不能从 javascript 代码发送 ajax 请求？

最好的方法是在失去焦点时发送 GET ajax 请求。 然后获取请求可以返回真或假，然后您的 javascript 可以在页面上反映这一点。

Answer 4

@Viacheslav 拥有的解决方案运行良好，我的回答是结合了他和我自己的更改（尤其是 JS）部分。

我们将使用Ajax来实现这一点。

让我们首先在 controller 中创建我们的 function

def checkname
  if !User.find_by_display_name(params[:dn])
    render json: {status: 200}
  else
    render json: {status: 409}
  end
  return
end

然后在routes.rb中添加我们的routes

resources :yourcontroller do
  collection do
    get 'checkname'
  end
end

现在让我们来看看这个视图。 下面你会看到输入：

.field
  = f.text_field :display_name, onblur: "checkDisplayName.validate(this.value)"
  %p.error-name.disp-none username exists

现在在JS的帮助下，我们得到了神奇的效果。 Blow JS的功能很少。 validate进行实际验证。 getStatus是我们的Ajax调用来获取状态，我们使用showError和disableSubmitButton对我们的表单进行更多的生产准备以显示错误并禁用提交按钮。

var checkDisplayName = {
  validate: function(dn){
    checkDisplayName.getStatus(dn).then(function(result) {
      if (!!result){
        if (result.status != 200){
          checkDisplayName.disableSubmitButton(true);
          checkDisplayName.showError();
        } else{
          checkDisplayName.disableSubmitButton(false);
        }
      }
    });
    return false;
  },
  getStatus: async (dn) => {
    const data = await fetch("/pages/checkname?dn=" + dn)
      .then(response => response.json())
      .then(json => {
        return json;
      })
      .catch(e => {
          return false
      });
    
    return data;
  },
  showError: function() {
    let errEl = document.getElementsByClassName('error-name')[0];
    if (!!errEl) {
      errEl.classList.remove("disp-none");
      window.setTimeout(function() { errEl.classList.add("disp-none"); },3500);
    }
  },
  disableSubmitButton: function(status){
    let button = document.querySelector('[type="submit"]');
    button.disabled = status;
  }
};