Skip to content

Instantly share code, notes, and snippets.

@jhjguxin

jhjguxin/new.html.erb

Created August 17, 2012 06:50
Show Gist options
  • Save jhjguxin/3376569 to your computer and use it in GitHub Desktop.
Save jhjguxin/3376569 to your computer and use it in GitHub Desktop.
Download ZIP
form verify base on bbtang.com
Raw
new.html.erb
<!-- container S -->
<% content_for :shared_head do %>
<!--shared_head><shared_head-->
<% end %>
<div class="regist_box">
<div class="regist_header">
<h1 class="logo"><%= link_to "棒棒糖亲子问答社区", root_path %></h1>
<div class="login_nav">
<%= link_to "登录", new_user_session_path, :id => "login", class: "login_link" %><b class="line">|</b>
<span class="other_login">
<em>第三方账号登录：</em>
<span class="ot_lg_link">
<%= link_to "", users_sina_sync_new_path, :class=>"sina_wb", :target=> "_blank", :title=>"新浪微博"%>
<%= link_to "", users_cqq_sync_new_url, :class=>"qq_icon", :title=>"腾讯QQ" %>
<%= link_to "", users_tqq_sync_new_path, :class=>"qq_wb", :title=>"腾讯微博登录"%>
</span>
</span>
</div>
</div>
<div class="regist_con">
<div class="regist_pic">
<img src="/assets/sample/regist_pic.jpg" width="271" height="340" alt=""/>
</div>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :class =>"js_verification"}) do |f| %>
<div class="user_regist">
<div class="hd">
<h2>蜜糖是我们会员的昵称，欢迎你，新蜜糖！</h2>
</div>
<div class="bd">
<!--%= f.error_messages %-->
<div class="form_mod">
<div class="form_item">
<%= f.label :email, "电子邮箱：", class: "field" %>
<div class="con">
<%= f.email_field :email, class: "require input_txt" %>
</div>
</div>
<div class="form_item">
<%= f.label :password, "密　　码：", class: "field" %>
<div class="con">
<%= f.password_field :password, class: "require input_txt"%>
</div>
</div>
<div class="form_item">
<%= f.label :password_confirmation, "确认密码：", class: "field" %>
<div class="con">
<%= f.password_field :password_confirmation, class: "require input_txt" %>
</div>
</div>
<div class="form_item">
<%= label_tag :nickname, "昵　　称：", class: "field" %>
<div class="con">
<%= text_field_tag :nickname, nil, class: "require input_txt" %>
</div>
</div>
<div class='form_item'>
<%= show_simple_captcha(:label => "验 证 码：",:object => "user", class: "field") %>
</div>
<div class="form_item fm_btn">
<div class="con">
<%= f.submit "立即注册", :disable => true, :class => "regist_btn" %>
</div>
</div>
<div class="form_item fm_agree">
<div class="con">
<%= f.hidden_field :agree, :value => "1" %> 注册即代表您已阅读并同意<%= link_to "《棒棒糖网络服务使用协议》", protocol_path %>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
<!-- container E -->
Raw
user.js
function email_exists_check(input){
//var email = $("#new_user").find("#user_email").val();
if (input != null){
var email = input.val();
}else{
var email = $("#new_user").find("#user_email").val();
}
var r = "";
$.ajax({
type: "GET",
async: false,
url: "/validates/email?email="+email,
success: function(transport) {
console.log("SUCCESS");
console.log(transport);
r = transport;
},
error: function(transport) {
console.log("ERROR");
console.log(transport);
r = "true";
}
});
return r
};
function element_val_include_space(input) {
if (input != null){
if (input.val().match(/\ /)){
return true;
}else{
return false;
}
}else{
return false;
}
};
function email_verification(input){
if (input != null){
if( input.val() == "" ) {
if ( input.parent().find(".onDefault").length < 1 ){
//var defaultMsg = "请输入邮箱，如:[email protected]";
var defaultMsg = "用此邮箱接收激活邮件完成注册";
input.parent().append("<span class='fm_tip onDefault'><i></i>"+defaultMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
} else {
if( input.val() !="" && !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(input.val()) ) {
if (input.parent().find(".onError").length < 1){
var errorMsg = "邮箱输入错误";
input.parent().append("<span class='fm_tip onError'><i></i>"+errorMsg+"</span>");
}
}else{
var email_exists = email_exists_check(input = input)
if (email_exists == "true") {
if (input.parent().find(".onSuccess").length < 1){
var okMsg = "邮箱输入正确";
input.parent().append("<span class='fm_tip onSuccess' style='display:none;'><i></i>"+okMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}
if (email_exists == "false") {
if (input.parent().find(".onError").length < 1){
var errorMsg = "邮件已经被使用";
input.parent().append("<span class='fm_tip onError'><i></i>"+errorMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}
}
}
}
}
function nickname_verification(input){
if ( input != null ){
if( input.val() == "" ) {
if (input.parent().find(".onDefault").length < 1){
var defaultMsg = "最长14个英文或7个中文";
input.parent().append("<span class='fm_tip onDefault'><i></i>"+defaultMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
} else {
if(input.val().length < 2) {
if (input.parent().find(".onError").length < 1){
var errorMsg = "昵称长度不小于2位";
input.parent().append("<span class='fm_tip onError'><i></i>"+errorMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}
if (input.val() !="" && element_val_include_space(input)){
if (input.parent().find(".onError").length < 1){
var errorMsg = "昵称不能包含空格";
input.parent().append("<span class='fm_tip onError'><i></i>"+errorMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}else{
if (input.parent().find(".onSuccess").length < 1){
var okMsg = "昵称输入正确";
input.parent().append("<span class='fm_tip onSuccess' style='display:none;'><i></i>"+okMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}
}
}
}
function password_verification(input, password_type) {
var input_name = {
current_password: "当前密码",
password: "密码",
password_confirmation: "确认密码"
}
if (input != null && password_type != null){
if( input.val()=="" ) {
if (input.parent().find(".onDefault").length < 1){
if (password_type == "password_confirmation"){
var defaultMsg = "请再次输入" +input_name[password_type];
}else{
var defaultMsg = "请输入6位以上字符的"+input_name[password_type];
}
input.parent().append("<span class='fm_tip onDefault'><i></i>"+defaultMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}else{
if(input.val() !="" && input.val().length < 6) {
if (input.parent().find(".onError").length < 1){
var errorMsg = input_name[password_type] + "长度不小于6位";
input.parent().append("<span class='fm_tip onError'><i></i>"+errorMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}else{
if (password_type == "password_confirmation") {
if (input.val() == $("#user_password").val()){
if (input.parent().find(".onSuccess").length < 1){
var okMsg = input_name[password_type] + "格式正确";
input.parent().append("<span class='fm_tip onSuccess' style='display:none;'><i></i>"+okMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
} else {
if (input.parent().find(".onError").length < 1){
var errorMsg = input_name[password_type] + "输入不一致";
input.parent().append("<span class='fm_tip onError'><i></i>"+errorMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}
} else {
if (input.parent().find(".onSuccess").length < 1){
var okMsg = input_name[password_type] + "格式正确";
input.parent().append("<span class='fm_tip onSuccess' style='display:none;'><i></i>"+okMsg+"</span>");
}
input.parent().find(".fm_tip").delay(2000).fadeOut(400);
}
}
}
}
}
function js_verification() {
//$("form :input.require").each(function() {
// var $xing = $("<i class='red'> * </i>");
// $(this).parent().append($xing);
//});
//对必填项的判断由jquery来完成，为必填项添加“*”号
//:class =>"js_verification"
$("form.js_verification :input").blur(function() {
var $parent = $(this).parent();
$parent.find(".fm_tip").remove();
//进行下一步判断前把之前的结果清除
//this.value==""
var input_id = this.id
switch(input_id)
{
case "user_login":
email_verification(input = $("#user_login"))
break
case "user_email":
email_verification(input = $("#user_email"))
break
case "nickname":
nickname_verification(input = $("#nickname"))
break
case "user_password":
password_verification(input = $("#user_password"), password_type ="password")
break
case "user_current_password":
password_verification(input = $("#user_current_password"), password_type ="current_password")
break
case "user_password_confirmation":
password_verification(input = $("#user_password_confirmation"), password_type ="password_confirmation")
break
default:
console.log("I cann't verification it")
}
/*
if ($("#user_login").length > 0){
email_verification(input = $("#user_login"))
}
if ($("#user_email").length > 0){
email_verification(input = $("#user_email"))
}
if ($("#nickname").length > 0){
nickname_verification(input = $("#nickname"))
}
if ($("#user_password").length > 0){
password_verification(input = $("#user_password"), password_type ="password")
}
if ($("#user_current_password").length > 0){
password_verification(input = $("#user_current_password"), password_type ="current_password")
}
if ($("#user_password_confirmation").length > 0){
password_verification(input = $("#user_password_confirmation"), password_type ="password_confirmation")
}
*/
}).focus(function() {
$(this).triggerHandler("blur");
})
/*.keyup(function() {
$(this).triggerHandler("blur");
}).focus(function() {
$(this).triggerHandler("blur");
});*/
//在敲击键盘和输入框获取焦点时用triggerHandler()方法模拟blur事件，来触发对本项的验证
//注册提交按钮
$("form :input.regist_btn").click(function() {
$("form .require:input").trigger("blur");
var errorNum = $("form .onError").length;
var defaultNum = $("form .onDefault").length;
if(defaultNum == 0 && errorNum == 0) {
return true;
} else {
return false;
}
});
//快速登录提交按钮
/*
$("form :input.i_btn1").click(function() {
$("form .require:input").trigger("blur");
var errorNum = $("form .onError").length;
var defaultNum = $("form .onDefault").length;
if(defaultNum) {
return false;
}
if(errorNum) {
return false;
}
return true
});
*/
/*
//登录提交按钮
$("form :input.login_btn").click(function() {
$("form .require:input").trigger("blur");
var errorNum = $("form .onError").length;
var defaultNum = $("form .onDefault").length;
if(defaultNum > 0 || errorNum > 0) {
return false;
} else {
return true;
}
});
//修改密码提交按钮
$("form.edit_user :input.save_btn").click(function() {
$("form .require:input").trigger("blur");
var errorNum = $("form .onError").length;
var defaultNum = $("form .onDefault").length;
if(defaultNum > 0 || errorNum > 0) {
return false;
} else {
return true;
}
});
//pop_login提交按钮
$("form.login_pop :input.btn").click(function() {
$("form .require:input").trigger("blur");
var errorNum = $("form .onError").length;
var defaultNum = $("form .onDefault").length;
if(defaultNum > 0 || errorNum > 0) {
return false;
} else {
return true;
}
});
//点击“提交”按钮时根据表单内错误信息的数量判断是否全部填写正确
*/
}
function email_autocomplete(email,hosts) {
/* custom source autocomplete */
// 自定义source函数
var hosts = [
"qq.com",
"163.com",
"126.com",
"sina.com",
"sohu.com",
"hotmail.com",
"yahoo.com",
"139.com",
"189.com",
"msn.com",
"gmail.com",
"me.com"
];
//var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "火星.com", "囧月.com"];
email.autocomplete({
//autoFocus: true,
delay: 0,
open: function(event, ui) {
$('.ui-autocomplete').width(email.outerWidth());
$('.ui-autocomplete').css("z-index", 900)
},
width: email.outerWidth(),
focus: function( event, ui ) {
email.val( ui.item.label );
return false;
},
source: function(request, response) {
var term = request.term, //request.term为输入的字符串
ix = term.indexOf("@"),
name = term, // 用户名
host = "", // 域名
result = []; // 结果
result.push(term);
// result.push({ label: term, value: term }); // json格式
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) {
var findedHosts = (host ? $.grep(hosts, function(value) {
return value.indexOf(host) > -1;
}) : hosts),
findedResults = $.map(findedHosts, function(value) {
return name + "@" + value; //返回字符串格式
// return { label: name + " @ " + value, value: name + "@" + value }; // json格式
});
result = result.concat($.makeArray(findedResults));
}
response(result); //呈现结果
//email.val(result);
}
});
};
//http://docs.jquery.com/Ajax_Events
function ajax_session_callback() {
// bind the result of ajax_session form's submit
$('form#ajax_session_form')
.bind('ajax:error', function(xhr, status, error) {
$("#ajax_session_tip").html('<p class="text-errors">'+status.responseText+'.</p>').show().fadeOut(3000)
})
.bind('ajax:complete', function(xhr, status, error) {console.log("send sign_in request complete ...");});
/*
$("form#ajax_session_form")
.bind("ajax:beforeSend", console.log("sign_in now ..."))
.bind("ajax:complete", console.log("sign_in complete ..."))
.bind('ajax:failure', $("#ajax_session_tip").html('<p class="text-errors">Etiam porta sem malesuada magna mollis euismod.</p>').show().fadeOut(3000))
.bind("ajax:success", console.log("sign_in success ..."))
*/
};
function ajax_session(){
$.ajax({
type: "GET",
async: false,
url: "/users/new_ajax",
success: function(transport) {
console.log("SUCCESS");
//console.log(transport);
r = transport;
ajax_session_callback()
},
error: function(transport) {
console.log("ERROR");
//console.log(transport);
console.log("call ajax_session_form failure ...")
},
});
return r
}
$(document).ready(function() {
var user_email = $("input#user_email");
var user_login = $("input#user_login");
email_autocomplete(user_email);
email_autocomplete(user_login);
js_verification()
});
//login form input placeholder
$(function(){
var idInput = $("div.user_login input#user_login");
var pwdInput = $("div.user_login input#user_password");
var idTxt = idInput.next().text();
var pwdTxt = pwdInput.next().text();
var login_pop_id = $('div.login_popcon input#user_login');
var login_pop_pwd =$("div.login_popcon input#user_password");
var idTxt1 = login_pop_id.next().text();
var pwdTxt1 = login_pop_pwd.next().text();
if (pwdInput.val() != "" ){
pwdInput.next().text("");
}
if (login_pop_pwd.val() != "" ){
login_pop_pwd.next().text("");
}
pwdInput.focus(function(){
$(this).parent().css({'border-color':'#F68B1F','border-style':'solid','border-width':'1px'});
$(this).next().text("");
}).blur(function(){
$(this).parent().removeAttr('style');
if($(this).val()==""){$(this).next().text(pwdTxt);}
});
login_pop_pwd.focus(function(){
$(this).css({'border-color':'#F68B1F','border-style':'solid','border-width':'1px'});
$(this).next().text("");
}).blur(function(){
$(this).removeAttr('style');
if($(this).val()==""){$(this).next().text(pwdTxt1);}
});
if (idInput.val() != "" ){
idInput.next().text("");
}
if (login_pop_id.val() != "" ){
login_pop_id .next().text("");
}
idInput.focus(function(){
$(this).parent().css({'border-color':'#F68B1F','border-style':'solid','border-width':'1px'});
$(this).next().text("");
}).blur(function(){
$(this).parent().removeAttr('style');
if($(this).val()==""){$(this).next().text(idTxt);}
});
login_pop_id.focus(function(){
$(this).css({'border-color':'#F68B1F','border-style':'solid','border-width':'1px'});
$(this).next().text("");
}).blur(function(){
$(this).removeAttr('style');
if($(this).val()==""){$(this).next().text(idTxt1);}
});
});
//注册页文本框高亮效果
$(function(){
$('#form_mod input').focus(function(){
$(this).css({'border-color':'#F68B1F','border-style':'solid','border-width':'1px'});
}).blur(function(){
$(this).removeAttr('style');
});
});
/*
$(document).ready(function() {
var autocompOpts = {
minChars:0,
matchSubset:false,
matchContains: true,
source : []
};
var domains = [
"@qq.com",
"@163.com",
"@126.com",
"@sina.com",
"@sohu.com",
"@hotmail.com",
"@yahoo.com",
"@139.com",
"@189.com",
"@msn.com",
"@gmail.com",
"@me.com"
];
var user_email = $("input#user_email")
var user_login = $("input#user_login")
user_login.autocomplete(autocompOpts);
user_email.autocomplete(autocompOpts);
user_login.bind('keyup', function(event) {
if (event.shiftKey == 1 && event.keyCode == 50) {
var userName = $(this).val();
userName = userName.substring(0, userName.length - 1);
var emailIDs = [];
$.each(domains, function(index,domain){
emailIDs.push(userName + domain);
});
autocompOpts.source = emailIDs;
$(this).autocomplete(autocompOpts);
}
});
user_email.bind('keyup', function(event) {
if (event.shiftKey == 1 && event.keyCode == 50) {
var userName = $(this).val();
userName = userName.substring(0, userName.length - 1);
var emailIDs = [];
$.each(domains, function(index,domain){
emailIDs.push(userName + domain);
});
autocompOpts.source = emailIDs;
$(this).autocomplete(autocompOpts);
}
});
});
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment