Skip to content

Instantly share code, notes, and snippets.

@alanerzhao

alanerzhao/ajax-form.js

Created November 14, 2013 09:30
Show Gist options
  • Save alanerzhao/7463984 to your computer and use it in GitHub Desktop.
Save alanerzhao/7463984 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ajax-form.js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body id="MF">
<!--header-->
<?php $this->load->view('common/header');?>
<!-- Container Start -->
<div class="container">
<div id="J_tab" class="login">
<div class="login-box">
<!--<div id="LoadingImage" style="display: none">
<img src="/usercenter/static/img/load.gif" />
</div>-->
<div class="login-wrap">
<div class="login-hd">
<span class="account">登录我的帐号</span>
<span class="fn-right register register-btn">注册</span>
</div>
<div class="login-hd uhide">
<span class="account">注册新帐号</span>
<span class="fn-right register login-btn">登录</span>
</div>
<div class="login-hd uhide">
<span class="account">找回密码</span>
<span class="fn-right register return-btn">返回</span>
</div>
<div class="login-hd" style="display:none;"><span class="fn-right register"><a href="#">返回</a></span><span class="account">找回密码</span></div>
<div class="login-hd" style="display:none;"><span class="fn-right register"><a href="#">注册</a></span><span class="account">登录我的账号</span></div>
<div class="tab-bd">
<div class="login-item J_active">
<form action="" id="Jlogin">
<ul class="login-bd">
<li><input name="" id="loginUser" type="text" placeholder="用户名/邮箱" class="text" data-info={"ok":"输入正确","error":"格式错误","warn":"请填写用户名"} class="text"></li>
<li><input name="" id="loginPssWord" type="password" placeholder="输入密码" class="text" data-info={"ok":"输入正确","error":"格式错误","warn":"请输入密码"}></li>
<li style="display:none;" class="validate-wrap">
<input name="" type="text" id="login-code" placeholder="验证码" class="text" style="margin-bottom: 15px;display:block;">
<span class="img-bd"><img src="<?php echo base_url('user/vcode');?>"/></span><span class="validate"><a href="javascript:void(0);"></span><span class="look">看不清？换一张</span></a></li>
<li><input name="" id="logBtn" type="submit" class="btn" value="登录"></li>
<li><span class="fn-right tab-item-hd"><a href="javascript:;" class="forget-password">忘记密码？</a></span><span><input name="" type="checkbox" value=""> 记住我</span></li>
</ul>
</form>
</div>
<div class="register-item ">
<form action="" id="register">
<ul class="login-bd">
<li><input name="" id="userName" type="text" placeholder="用户名" class="text" data-info={"ok":"输入正确","error":"格式错误","warn":"请填写用户名"} class="text"></li>
<li><input name="" id="userEmail" type="text" placeholder="输入邮箱" class="text" data-info={"ok":"输入正确","error":"格式错误","warn":"请填写邮箱"}></li>
<li><input name="" id="passWord" type="password" placeholder="输入密码" class="text" data-info={"ok":"输入正确","error":"格式错误","warn":"请输入密码"}></li>
<li><input name="" id="regBtn" type="submit" class="btn" value="注册新账号"></li>
</ul>
</form>
</div>
<div class="forget-password-wrap return-item">
<form action="" id="forget-paddword">
<ul class="login-bd">
<li><input id="forgetName" name="" type="text" placeholder="用户名/邮箱" class="text"></li>
<li><input id="forgetVa"name="" type="text" placeholder="验证码" class="text"></li>
<li><span class="img-bd"><img src="<?php echo base_url('user/vcode');?>"/></span><span class="validate"><a href="javascript:void(0);"></span><span class="look">看不清？换一张</span></a></li>
<li><a href="javascript:;" id="resBtn" class="btn">重置密码</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="other-login">社交帐号直接登录：<span class="QQ"><a href="<?php echo base_url('user/qq');?>">QQ</a></span><span class="weibo"><a href="<?php echo base_url('user/weibo');?>">新浪微博</a></span>
</div>
</div>
</div>
</div>
<!-- Container End -->
<?php $this->load->view('common/footer');?>
<!--Footer End-->
<script type="text/javascript" src="<?php echo base_js('tab');?>"></script>
<script type="text/javascript">
var domain_url = "";
$(function () {
$(".register-btn").click(function () {
$(this).parent().hide().next().show();
$(".register-item").show().siblings().hide();
})
$(".login-btn").click(function () {
$(this).parent().hide().prev().show();
$(".login-item").show().siblings().hide();
})
$(".return-btn").click(function () {
$(this).parent().hide().prev().prev().show();
$(".login-item").show().siblings().hide();
})
$(".forget-password").click(function () {
$(".return-btn").parent().show().siblings(".login-hd").hide();
$(".return-item").show().siblings().hide();
})
});
(function() {
function Validate(formwrap, userName, userPass, senBtn) {
//create tips
this.tips = $("<span class='tips-info'></span>"),
this.form = $(formwrap),
this.user = $(userName, this.form),
this.email = $("#userEmail"),
this.pass = $(userPass, this.form),
this.btn = $(senBtn, this.form),
this.verifyConf = {
telReg: /^0?(13|14|15|18)[0-9]{9}$/,
emailReg: /^\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
passReg: /.{6,16}/,
qqReg: /^[1-9]\d{4,10}$/,
nameReg: /^[a-zA-Z0-9_-]{3,16}$/,
nickNameReg: /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
idRge: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/
}
this.init();
}
Validate.prototype = {
init: function() {
//模板
var tipsTmpl = "<span class='tips'></span>";
_this = this;
this.form.find(".text").before(tipsTmpl);
//user
this.user.bind("focus", function() {
_this.focusTip($(this));
})
this.user.bind("blur", function() {
if(_this.blurTip($(this), _this.verifyConf.nameReg)) {
_this.checkAjax($(this), domain_url + "/user/check_username", 'username');
}
})
//email
this.email.bind("focus", function() {
_this.focusTip($(this));
})
this.email.bind("blur", function() {
// _this.blurTip($(this), _this.verifyConf.emailReg);
if(_this.blurTip($(this), _this.verifyConf.emailReg)) {
_this.checkAjax($(this), domain_url + "/user/check_email", 'email')
}
})
//pass
this.pass.bind("focus", function() {
_this.focusTip($(this));
})
this.pass.bind("blur", function() {
_this.blurTip($(this), _this.verifyConf.passReg);
})
//form
this.form.submit(function() {
$('.text', this).blur();
//fe error
if ($(".warn").length || $(".error").length) {
return false;
} else {
//be success
var jsonData = {
"username": _this.user.val(),
"password": _this.pass.val(),
"email": _this.email.val(),
"vcode": "asdasda",
"type": "ajax",
}
$.ajax({
url: domain_url + "/user/register",
type: "post",
data: jsonData,
dataType: "json",
success: function(data) {
if (data.code == 1) {
//load
// console.log(_this);
_this.ajaxLoad(data);
} else {
//console.log(data);
}
},
error: function() {}
})
}
return false;
})
},
focusTip: function(current) {
this.tipsInfo = $.parseJSON(current.attr("data-info"));
current.prev(".tips").text(this.tipsInfo.warn).show();
},
//blurtips
blurTip: function(current, check) {
tipsInfo = $.parseJSON(current.attr("data-info"));
current.prev(".tips").show();
if (current.val() == "") {
current.prev(".tips").text(tipsInfo.warn);
return false;
} else if (check.test(current.val())) {
current.prev(".tips").text(tipsInfo.ok);
return true;
} else {
current.prev(".tips").text(tipsInfo.error);
return false;
}
},
checkAjax: function(current, pathUrl, data) {
current.prev('.tips').show();
$.ajax({
url: pathUrl,
type: "post",
data: data + '=' + current.val(),
dataType: "json",
success: function(data) {
if (data.code == 1) {
current.prev().text("输入正确")
} else if (data.code == 0) {
current.prev().text(data.msg)
} else {
}
},
error: function() {}
})
},
ajaxLoad: function(data) {
//backurl
// console.log(data);
window.location.href = data.data.backurl;
}
}
// register validate
new Validate("#register", "#userName", "#passWord", "#regBtn")
//user login
function userLogin() {
var tmpl = $("<span class='tips logintips'>请输入帐号密码</span>"),
loginUser = $("#loginUser"),
loginPssWord = $("#loginPssWord"),
logincode = $("#login-code");
loginUser.before(tmpl);
var logintips = $(".logintips");
loginUser.blur(function() {
var self = $(this);
tipsShow(self);
})
loginPssWord.blur(function() {
var self = $(this);
tipsShow(self);
})
function tipsShow(current) {
if (current.val() == "") {
logintips.show();
} else {
logintips.hide();
}
}
$("#Jlogin").submit(function() {
loginUser.blur();
if (loginUser.val() == "" || loginPssWord.val() == "") {
logintips.show();
return false;
} else {
// $("#LoadingImage").show();
// $(".login-wrap").hide();
var jsondata = {
"username": loginUser.val(),
"password": loginPssWord.val(),
"vcode" : logincode.val(),
"type": "ajax",
}
$.ajax({
url: domain_url + "/user/login",
type: "post",
data: jsondata,
dataType: "json",
success: function(data) {
if (data.code == 1) {
//$("#LoadingImage").hide();
window.location.href = data.data.backurl;
} else {
//$(".login-wrap").show();
//$("#LoadingImage").hide();
logintips.text(data.msg).show();
if (data.data.flag) {
var srcLink = $(".img-bd img").attr("src");
$(".img-bd img").attr("src",srcLink.replace("?",""))
$(".validate-wrap").show();
} else {
$(".validate-wrap").hide();
}
}
},
error: function() {
//$(".login-wrap").show();
// $("#LoadingImage").hide();
}
})
return false;
}
return false;
})
}
userLogin();
//forget passowrd
function forgetWord() {
var porgetword = $("#forget-paddword"),
forgetName = $("#forgetName"),
forgetVer = $("#forgetVa"),
tmpl = $("<span class='tips forgettips'>请输入帐号/验证码</span>"),
resBtn = $("#resBtn");
forgetName.before(tmpl);
$(".look").click(function () {
var srcLink = $(".img-bd img").attr("src");
$(".img-bd img").attr("src",srcLink.replace("?",""))
})
forgetName.blur(function() {
if ($(this).val() == "") {
$(".forgettips").show();
}
else {
$(".forgettips").hide();
}
})
resBtn.click(function() {
forgetName.blur();
if (forgetName.val() == "" || forgetVer.val() == "") {
$(".forgettips").show();
return false;
} else {
var jsondata = {
"username": forgetName.val(),
"vcode": forgetVer.val(),
"type": "ajax",
}
$.ajax({
url: "/user/forget",
type: "post",
data: jsondata,
dataType: "json",
success: function(data) {
// if (data.code == 1) {
//window.location.href = data.data.backurl;
// } else {
$(".forgettips").text(data.msg).show();
// if (data.data.flag) {
// $(".forgettips").show();
// } else {
// $(".forgettips").hide();
// }
var srcLink = $(".img-bd img").attr("src");
$(".img-bd img").attr("src",srcLink.replace("?",""))
// }
},
error: function() {
// console.log("Error")
}
})
}
return false;
})
}
forgetWord();
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment