精华帖 (0) :: 良好帖 (4) :: 新手帖 (13) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-12-12
最后修改:2009-12-12
先上效果图吧!
验证标准方法分成了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行数据需要返回,就直接写到控制器里了。
欢迎留言赐教! 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2009-12-13
都是看帖不回帖的坏儿童
|
|
返回顶楼 | |
发表时间:2009-12-14
没人回,我来帮你顶顶人气。 不过我的ror还学得一塌糊涂,提不了什么意见。不过从Web开发角度来看,好像你的后端没做二次校验,这个是比较危险的。
|
|
返回顶楼 | |
发表时间:2009-12-14
我也用过rails,嘿嘿。。好久了,意见还真谈不上。
|
|
返回顶楼 | |
发表时间:2009-12-14
rails内置是propotype,集成性比较方便,默认的少敲了不少代码,不过jquery的插件实在是太丰富了。
|
|
返回顶楼 | |
发表时间:2009-12-14
wlon 写道
没人回,我来帮你顶顶人气。 不过我的ror还学得一塌糊涂,提不了什么意见。不过从Web开发角度来看,好像你的后端没做二次校验,这个是比较危险的。
做了模型层的validate,那是最基本的。不然如果用户禁用了JS,就。。。。。 |
|
返回顶楼 | |
发表时间:2009-12-14
supercode 写道 rails内置是propotype,集成性比较方便,默认的少敲了不少代码,不过jquery的插件实在是太丰富了。
propotype太没有ruby的风格啦!jQuery才像ruby风格嘛! |
|
返回顶楼 | |
发表时间:2009-12-15
最后修改: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 |
|
返回顶楼 | |
浏览 10422 次