Rails+jquery实现Ajax式注册验证
先放个效果图上来看看:
下面来讲明如何用rails+jquery实现这样的注册表单的ajax数据验证:
基本的注册,登陆模块使用restful_authentication插件生成.
在注册页面,也就是sessions/new.html.erb中
里面为了排版的整齐,我对表单用了table格式.
这里用到了三个js文件:jquery.js, jquery.validate.js, register.js
jquery.js和jquery.validate.js能够到 jquery网站上下载.
register.js是自定义的jquery代码:
register.js:
这是jquery.validate这个插件的方法.
这段代码能够分红这么几个部分
$("#signupform").validate({
rules: {
//对须要验证数据添加各类规则
},
});
下面对这几个部分分别来进行说明:
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代码:
下面来讲明如何用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>
<%= 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>
这里用到了三个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 as text for IE
label.html(" ").addClass("checked");
}
});
});
$("#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 as text for IE
label.html(" ").addClass("checked");
}
});
});
这是jquery.validate这个插件的方法.
这段代码能够分红这么几个部分
$("#signupform").validate({
rules: {
//对须要验证数据添加各类规则
},
messages: {
//对未经过验证的数据对应显示的消息
},
//对未经过验证的数据对应显示的消息
},
success: function(label) {
//数据成功经过验证以后,焦点转移后的动做
},
//数据成功经过验证以后,焦点转移后的动做
},
errorPlacement: function(error, element) {
//设置消息显示的位置
},
//设置消息显示的位置
},
submitHandler: function(form) {
//当表单符合全部验证规则以后,点击"submit"以后的动做
},
//当表单符合全部验证规则以后,点击"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 id="user_login" name="user[login]" size="30" type="text" />
注意,在写数据项验证规则时,要使用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式的验证了.比较简单就再也不详述了.