Javascript 如何在使用RubyonRails在数据库中搜索值的ajax表单上添加jquery验证？

因此，我最近实现了一个电话/sim卡检查器。第一个表单输入要求用户输入他们的电话号码。如果数据库中存在电话号码，则呈现“找到电话号码”消息，否则将“电话号码”表单替换为“sim卡号码”表单。同样，如果数据库中存在sim号码，则呈现sim号码已找到消息，否则呈现sim号码未找到消息

在用户单击submit时触发checkphone/checksim方法之前，是否有人可以向我展示一个如何在用户输入上使用jquery验证的示例？已在我的手机型号（phone.rb）中设置验证

代码如下： app/controllers/phones\u controller.rb

class PhonesController < ApplicationController
  def checkphone
    @phone_number = Phone.where(phone_number: params[:phone][:phone_number])
    respond_to do |format|
      if @phone_number.exists?
        format.js {render 'phone-found'}
      elsif @phone_number.blank?
        format.js {render 'phone-not-found'}
      else
        format.js {render 'errors'}
      end
    end
  end

  def checksim
    @sim_number = Phone.where('sim_number = ?', params[:sim][:sim_number])
    respond_to do |format|
      if @sim_number.exists?
        format.js {render 'sim-found'}
      elsif @sim_number.blank?
        format.js {render 'sim-not-found'}
      else
        format.js {render 'errors'}
      end
    end
  end

  private

  def phone_params
    params.require(:phone).permit(
      :phone_number
    )
  end

  def sim_params
    params.require(:sim).permit(
      :sim_number
    )
  end
end

app/views/phones/phone-not-found.js.erb

$('#phone-number-found').html('Phone Number Found!');
$('#phone-number-not-found').html('');
$('#error').html('');
$('#phone-number-form').hide();

$('#phone-number-found').append("<%= j render(partial: 'sim') %>")
$('#phone-number-not-found').html('Phone Number Not Found!');
$('#error').html('');
$('#phone-number-form').hide();

$('#phone-number-found').html('Sim Found')
$('#phone-number-not-found').html('');
$('#phone-number-error').html('');

$('#phone-number-found').html('');
$('#phone-number-not-found').html('Sim Number Not Found!');
$('#error').html('');

app/views/phones/sim-not-found.js.erb

$('#phone-number-found').html('Phone Number Found!');
$('#phone-number-not-found').html('');
$('#error').html('');
$('#phone-number-form').hide();

$('#phone-number-found').append("<%= j render(partial: 'sim') %>")
$('#phone-number-not-found').html('Phone Number Not Found!');
$('#error').html('');
$('#phone-number-form').hide();

$('#phone-number-found').html('Sim Found')
$('#phone-number-not-found').html('');
$('#phone-number-error').html('');

$('#phone-number-found').html('');
$('#phone-number-not-found').html('Sim Number Not Found!');
$('#error').html('');

app/views/phones/errors.js.erb

$('#phone-number-found').html('');
$('#phone-number-not-found').html('');
$('#error').html('Error!');

config/routes.rb

post "/checkphone" => "phones#checkphone"
  post "/checksim" => "phones#checksim"

  resources :phones, path: '4g-promo'

---

如果有人能在checkphone和checksim方法启动之前告诉我如何根据我的模型验证规则应用jquery验证，我将不胜感激。谢谢

添加minlength、maxlength和required就可以了。然后，sim部分将显示为：

app/views/phones/_sim.html.erb

<div id="sim-number-found"></div>
<div id="sim-number-not-found"></div>
<div id="error"></div>
<%= form_for :sim, :url => url_for(:action => 'checksim', :controller => 'phones'), remote: true, html: { id: 'sim-number-form'}  do |f| %>
  <%= f.label "Sim Number:" %>
  <%= f.number_field :sim_number %>
  <%= submit_tag("Check") %>
<% end %>

<div id="sim-number-found"></div>
<div id="sim-number-not-found"></div>
<div id="error"></div>
<%= form_for :sim, :url => url_for(:action => 'checksim', :controller => 'phones'), remote: true, html: { id: 'sim-number-form'}  do |f| %>
  <%= f.label "Sim Number:" %>
  <%= f.number_field :sim_number, minlength: 12, maxlength: 12, required: true %>
  <%= submit_tag("Check") %>
<% end %>

url_for（：action=>'checksim'，：controller=>'phones'），remote:true，html:{id:'sim number form'}do | f |%>

用户gem也将使用服务器端验证进行客户端验证。

从技术上讲，您希望在jQuery事件上验证电话号码和sim卡号码，对吗？