开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Rails+jquery实现Ajax式注册验证

简介:
+关注继续查看
先放个效果图上来看看:

下面来说明如何用rails+jquery实现这样的注册表单的ajax数据验证:

基本的注册,登录模块使用restful_authentication插件生成.

在注册页面,也就是sessions/new.html.erb中

<%content_for "head" do %>
  <%= stylesheet_link_tag "users/new"  %>

  <%= javascript_include_tag "jquery/users/register","jquery/users/jquery.validate" %>
  <script type="text/javascript">
      jQuery.validator.setDefaults({
          debug: true,
          success: "valid"
      });;
  </script>



<%end%>


<fieldset id="ologin"><legend>Register</legend>
  <div class="box">
    <%= error_messages_for :user %>
    <% form_for :user, :url => users_path, :html=>{:id=>"signupform"} do |f| -%>
      <table>
        <tr>
          
            <td><label for="login"><span>Login</span></label></td>
            <td><%= f.text_field :login %></td>
            <td class="status"></td>
        </tr>
        <tr>
          <td><label for="email"><span>Email</span></label></td>
          <td><%= f.text_field :email %></td>
          <td class="status"></td>
          
        </tr>
        <tr>
          <td><label for="password"><span>Password</span></label></td>
          <td><%= f.password_field :password %></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td><label for="password_confirmation"><span>Confirm Password</span></label></td>
          <td><%= f.password_field :password_confirmation %></td>
          <td class="status"></td>
        </tr>
      </table>
      <div class="spacer"><%= submit_tag 'signup', :class=>"butt"%></div>
    
    <% end -%>
            
  </div>
</fieldset>



里面为了排版的整齐,我对表单用了table格式.

这里用到了三个js文件:jquery.js, jquery.validate.js, register.js

jquery.js和jquery.validate.js可以到jquery网站上下载.

register.js是自定义的jquery代码:

register.js:
$(document).ready(function(){
  
    $("#signupform").validate({
        rules: {
            "user[login]": {
                required: true,
                minlength:5,
                remote: {
                   data: {
                        user_name: function(){
                            return $('#user_login').val();
                        }
                    },
                    url: "users/",
                    type: "get"
                    
                }

            },
            
            "user[password]":{
                required: true,
                minlength:6
            },
            
            "user[password_confirmation]": {
                required: true,
                minlength: 5,
                equalTo: "#user_password"

            },
            
            "user[email]":{
                required: true,
                email: true
            }
        },
        messages: {
                     "user[login]": {
                required: "Enter a username",
                minlength: jQuery.format("Enter at least {0} characters"),
                remote: "Already in use"
            },
            
            "user[password]":{
               required: "Provide a password",

                minlength: jQuery.format("Enter at least {0} characters")

            },
            
            "user[password_confirm]": {
                required: "Repeat your password",
                minlength: jQuery.format("Enter at least {0} characters"),
                equalTo: "Enter the same password as above"
            },

            
            "user[email]":{
              required: "Please enter a valid email address",
              minlength: "Please enter a valid email address"

            }
        },
        errorPlacement: function(error, element) {
            
                error.appendTo( element.parent().next() );

        },
        // specifying a submitHandler prevents the default submit, good for the demo
        submitHandler: function(form) {
            alert("submitted!");
                        form.submit();
        },
        // set this class to error-labels to indicate valid fields
        success: function(label) {
            // set &nbsp; as text for IE
            label.html("&nbsp;").addClass("checked");
        }
        
    });
    
            
});

这是jquery.validate这个插件的方法.

这段代码可以分成这么几个部分

$("#signupform").validate({

        rules: {
            //对需要验证数据添加各种规则
        },
messages: {
           //对未通过验证的数据对应显示的消息
        },
success: function(label) {
            //数据成功通过验证之后,焦点转移后的动作
        },
errorPlacement: function(error, element) {
            
           //设置消息显示的位置

        },
submitHandler: function(form) {
            //当表单符合所有验证规则之后,点击"submit"之后的动作
        },
});

下面对这几个部分分别来进行说明:
rules: {
            //对需要验证数据添加各种规则
        },
jquery.validate提供了很多验证的方法,具体内容可以参考API

比较常用的就是required()和remote了,required()方法就跟rails model里的validates_presence_of方法一样,验证数据非空.

这里拿用户名验证来说明它的用法:
"user[login]": {  
                required: true,
                minlength:5,
                remote: {
                   data: {
                        user_name: function(){
                            return $('#user_login').val();
                        }
                    },
                    url: "users/",
                    type: "get"
                    
                }

            },
下面这个是rails呈递的html代码:





注意,在写数据项验证规则时,要使用input标签的name属性,譬如这里
"user[login]"
remote是向server端发送ajax请求,要求从server端收到一个json数据
数据格式是key,value.譬如对于一个用户名为abc的数据,将它发到server端之后,
如果abc为合法数据,那么server端应该返回一个"abc",true这样格式的数据.反之,如果不合法,就返回
"abc",false.

那么remote内部,有三个参数,url指明server的地址, type指明http动作,data是传递的数据内容
data: {

              user_name: function(){

              return $('#user_login').val();

           }

       },

       url: "users/",

       type: "get"

}


这么写,我就将dom id为user_login的输入框内的数据传递给了users控制器,
方法为get,很明显在RESTful的架构中,这是传递到了users/index方法
(不过不知道为什么会传递两个相同的值user[login]="val"和user_name="val")

那么在index方法中:

def index
@user=User.find_by_login(params[:user_name])
if @user
json="\"#{params[:user_name]}\",false"
else
json="\"#{params[:user_name]}\",true"
end

respond_to do |format|
format.js {render :text=>json}
end
end

(这段代码写的比较恶心..不过凑乎能用)


这样就完成了这个数据项验证的ajax请求..其他的数据项基本上都是js式的验证了.
比较简单就不再详述了.





本文转自 fsjoy1983 51CTO博客,原文链接:http://blog.51cto.com/fsjoy/142351,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ajax第三例:用户名是否已被注册| 学习笔记
快速学习 ajax第三例:用户名是否已被注册。
0 0
ajax第三例:用户名是否已被注册|学习笔记
快速学习ajax第三例:用户名是否已被注册
0 0
struts2中使用ajax验证邮箱(用户名)是否被注册
struts2中使用ajax验证邮箱(用户名)是否被注册
0 0
jquery+ajax+php 实现注册(报名)
jquery+ajax+php 实现注册(报名)
0 0
ajax第三例:用户名是否已被注册| 学习笔记
快速学习 ajax第三例:用户名是否已被注册。
0 0
ajax第三例:用户名是否已被注册|学习笔记
快速学习ajax第三例:用户名是否已被注册
0 0
Ajax异步验证登陆或者注册
首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML。详细介绍见上面的网址即可; 1:首先介绍一下使用Javascript写的异步验证,然而在实际开发过程中很少用这种的,太过繁琐,但是依旧写一个吧!至少懂其原理哦!   1.1:第一种方式:先说使用get方法向服务
1381 0
ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册
  在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面的例子,我们只希望返回一个1和0有助于进行后续判断即可,没必要返回json类型,返回一个text字符串就可以了.
641 0
JQuery 的 Ajax 请求(重点****)
JQuery 的 Ajax 请求(重点****)
0 0
spring boot jquery ajax ie8解决跨域
spring boot jquery ajax ie8解决跨域
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript异步编程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载