在rails 6中使用jquery进行用户名和电子邮件实时验证

gem 'jquery-rails'

$(document).on('turbolinks:load', function() {
  // 监听用户名输入框的变化
  $('#username').on('input', function() {
    var username = $(this).val();
    
    // 发送异步请求到服务器进行用户名验证
    $.ajax({
      url: '/users/check_username',
      method: 'GET',
      data: { username: username },
      success: function(response) {
        if (response.valid) {
          // 用户名有效，显示成功消息
          $('#username-error').text('');
        } else {
          // 用户名无效，显示错误消息
          $('#username-error').text('用户名已存在');
        }
      }
    });
  });
  
  // 监听电子邮件输入框的变化
  $('#email').on('input', function() {
    var email = $(this).val();
    
    // 发送异步请求到服务器进行电子邮件验证
    $.ajax({
      url: '/users/check_email',
      method: 'GET',
      data: { email: email },
      success: function(response) {
        if (response.valid) {
          // 电子邮件有效，显示成功消息
          $('#email-error').text('');
        } else {
          // 电子邮件无效，显示错误消息
          $('#email-error').text('电子邮件已存在');
        }
      }
    });
  });
});

get '/users/check_username', to: 'users#check_username'
get '/users/check_email', to: 'users#check_email'

class UsersController < ApplicationController
  def check_username
    username = params[:username]
    
    # 在数据库中查找是否存在相同的用户名
    if User.exists?(username: username)
      render json: { valid: false }
    else
      render json: { valid: true }
    end
  end
  
  def check_email
    email = params[:email]
    
    # 在数据库中查找是否存在相同的电子邮件
    if User.exists?(email: email)
      render json: { valid: false }
    else
      render json: { valid: true }
    end
  end
end

<%= form_with(model: @user, local: true) do |form| %>
  <div class="field">
    <%= form.label :username %>
    <%= form.text_field :username, id: 'username' %>
    <span id="username-error" class="error"></span>
  </div>
  
  <div class="field">
    <%= form.label :email %>
    <%= form.email_field :email, id: 'email' %>
    <span id="email-error" class="error"></span>
  </div>
  
  <!-- 其他表单字段 -->
  
  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>