jQuery + Rails 快速实现用户注册AJAX验证

先上效果图吧！

 

验证标准方法分成了3个部分:

1 . 输入框失去焦点的时候验证并提醒，建立良好的用户体验。

2 . 表单提交前验证是否全部合格，确保数据符合要求。

3 . 模型层的验证。

 

这里说的用户注册AJAX验证主要是只离开用户名输入框焦点的时候即时提醒是否被占用。

 

 注册页面时用jquery插件thickbox展现的，这个不影响什么。

在验证用户是否被占用的时候，

使用jQuery的GET方式提交到users控制器的signup_login_check这个ACTION

之所以写成/users/signup_login_check/temp ,是因为我发现如果写/users/signup_login_check的话，

signup_login_check会被当成ID提交，action是show，改一下路由规则后应该是可以写成/users/signup_login_check的。

不然如果懒得改的话，写成/users/signup_login_check/temp 似乎也没什么害处，temp被按照默认路由解析成ID，也不起什么坏的作用。

 

这个是我的jQuery代码，以验证用户名为例。没用使用jquery的validate插件，我觉得直接写也没什么麻烦的。

先检查长度，符合要求再提交AJAX检查是否被占用。

 

 //开始验证输入的用户名
    $("input").focus(function(){
        $(this).setBlue();
    });
    $('#user_login').blur(function(){
        var login_length=$(this).val().length;
        if(login_length<=1 || login_length>=14){
            $(this).setRed("用户名为2-14个数字、字母、汉字");
        }
        else{
              $.get("/users/signup_login_check/temp",{
            user_login:$(this).val()
        },null,"script");
        };
    });

 

 这个是处理AJAX的ACTION

 def signup_login_check 
  	user=User.find_by_login(params[:user_login])
  	if user
      render  :js=> "$('#user_login').setRed('抱歉，该用户名已被占用');"
                else
      render  :js=> " $('#user_login').setGreen();"
  	end
  end

 

 上面有很多setRed  setGreen，这样命名其实不是很好，不过比较直观，其实是控制样式的jquery，代码如下

 $tip.addClass("errorFlag");

这个主要是用于按了提交按钮后来数有几个错误用的， errorFlag这个CSS类是空的，没有样式内容。

jQuery.fn.setRed=function(message){
        $(this).css("border-color",red);
        $tip=$(this).next();
        $tip.css("color",red);
        $tip.text(message);
        $tip.addClass("errorFlag");
        };
    jQuery.fn.setGreen=function(){
        $tip=$(this).next();
        $(this).css("border-color",green);
        $tip.css("color",green);
        $tip.html("<img src='/images/sign/alt.gif'>");
        $tip.removeClass("errorFlag");
    };

 

视图中的表单基本上是这样的：

<% form_for :user, :url => users_path ,:html=>{:id=>"usersignup"} do |f| -%>
        <table>
          <tr>
            <td >用户名:</td>
          </tr>
          <tr>
            <td ><%= f.text_field :login ,:class=>"sign_up_field"%>
              <em>用户名为2-14个数字、字母、汉字</em></td>
          </tr>
          <tr>
            <td >Email:</td>
          </tr>
          <tr>
            <td>
              <%= f.text_field :email,:class=>"sign_up_field" %>
              <em>Email将用于找回密码</em>
            </td>
          </tr>
          <tr>

 

提交前对所有文本框模拟的失去焦点，然后数有多少个errorFlag，这个是《锋利的jQuery》上介绍的做法，我直接搬过来了。

 //提交前的验证
    $("#send").click(function() {
        $("form :input").trigger('blur');
        var numError=$("form .errorFlag").length;
        if(numError>0){
            return false;
        }
    });

 

 

以上实现参考了 fsjoy1983 http://fsjoy.blog.51cto.com/318484/142351

他使用json返回数据，我用的js。而且他把验证ACTION放到INDEX里面了，这个做法不好。

 

还参考了 Ryan 的  http://railscasts.com/episodes/136-jquery 

他是用来处理留言，所以需要重新渲染的东西比较多，就集中放到 js.erb ，我只有1行数据需要返回，就直接写到控制器里了。

 

欢迎留言赐教！