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行数据需要返回，就直接写到控制器里了。

 

欢迎留言赐教！

评论

8 楼 ywencn 2009-12-15  

rainchen 写道

用jquery，我大概会这样做(细节忽略)：
用jquery，我大概会这样做(细节忽略)：

额。。。似乎不错，学习了！

7 楼 rainchen 2009-12-15  

用jquery，我大概会这样做(细节忽略)：

在b:

$("input").change(function(){
var $this = $(this);
$.getJSON('/users/new.json', {field, value}, functin(errors){
if(data.errors[$this.attr('name')]){
$this.addClass('fieldError');
}
})
});

在s:

# UsersController
def new
 @user = User.new(params[:user])
 respond_to do |format|
  format.html
  format.json { render :json => @user.valid? || @user.errors }
 end
end

6 楼 ywencn 2009-12-14  

supercode 写道

rails内置是propotype，集成性比较方便，默认的少敲了不少代码，不过jquery的插件实在是太丰富了。

propotype太没有ruby的风格啦！jQuery才像ruby风格嘛！

5 楼 ywencn 2009-12-14  

<div class="quote_title">wlon 写道</div>
<div class="quote_div">没人回，我来帮你顶顶人气。<img src="/images/smiles/icon_biggrin.gif" alt="">  不过我的ror还学得一塌糊涂，提不了什么意见。不过从Web开发角度来看，好像你的后端没做二次校验，这个是比较危险的。</div>
<p> </p>
<p>做了模型层的validate，那是最基本的。不然如果用户禁用了JS，就。。。。。</p>

4 楼 supercode 2009-12-14  

rails内置是propotype，集成性比较方便，默认的少敲了不少代码，不过jquery的插件实在是太丰富了。

3 楼 smallboby 2009-12-14  

我也用过rails，嘿嘿。。好久了，意见还真谈不上。

2 楼 wlon 2009-12-14  

没人回，我来帮你顶顶人气。  不过我的ror还学得一塌糊涂，提不了什么意见。不过从Web开发角度来看，好像你的后端没做二次校验，这个是比较危险的。

1 楼 ywencn 2009-12-13  

都是看帖不回帖的坏儿童