Fix bug 572
parent
75c96a60df
commit
18472acd3d
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
#slider {
|
||||
margin: 20px auto;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
background-color: #dae2d0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
#slider_bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background-color: #7AC23C;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#label {
|
||||
width: 46px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border: 1px solid #cccccc;
|
||||
background: #fff;
|
||||
z-index: 3;
|
||||
cursor: move;
|
||||
color: #ff9e77;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#labelTip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 13px;
|
||||
font-family: 'Microsoft Yahei', serif;
|
||||
color: #787878;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,200 @@
|
|||
/**
|
||||
* jquery plugin -- jquery.slideunlock.js
|
||||
* Description: a slideunlock plugin based on jQuery
|
||||
* Version: 1.1
|
||||
* Author: Dong Yuhao
|
||||
* created: March 27, 2016
|
||||
*/
|
||||
|
||||
;(function ($,window,document,undefined) {
|
||||
function SliderUnlock(elm, options, success){
|
||||
var me = this;
|
||||
var $elm = me.checkElm(elm) ? $(elm) : $;
|
||||
success = me.checkFn(success) ? success : function(){};
|
||||
|
||||
var opts = {
|
||||
successLabelTip: "Successfully Verified",
|
||||
duration: 200,
|
||||
swipestart: false,
|
||||
min: 0,
|
||||
max: $elm.width(),
|
||||
index: 0,
|
||||
isOk: false,
|
||||
lableIndex: 0
|
||||
};
|
||||
|
||||
opts = $.extend(opts, options||{});
|
||||
|
||||
//$elm
|
||||
me.elm = $elm;
|
||||
//opts
|
||||
me.opts = opts;
|
||||
//是否开始滑动
|
||||
me.swipestart = opts.swipestart;
|
||||
//最小值
|
||||
me.min = opts.min;
|
||||
//最大值
|
||||
me.max = opts.max;
|
||||
//当前滑动条所处的位置
|
||||
me.index = opts.index;
|
||||
//是否滑动成功
|
||||
me.isOk = opts.isOk;
|
||||
//滑块宽度
|
||||
me.labelWidth = me.elm.find('#label').width();
|
||||
//滑块背景
|
||||
me.sliderBg = me.elm.find('#slider_bg');
|
||||
//鼠标在滑动按钮的位置
|
||||
me.lableIndex = opts.lableIndex;
|
||||
//success
|
||||
me.success = success;
|
||||
}
|
||||
|
||||
SliderUnlock.prototype.init = function () {
|
||||
var me = this;
|
||||
|
||||
me.updateView();
|
||||
me.elm.find("#label").on("mousedown", function (event) {
|
||||
var e = event || window.event;
|
||||
me.lableIndex = e.clientX - this.offsetLeft;
|
||||
me.handerIn();
|
||||
}).on("mousemove", function (event) {
|
||||
me.handerMove(event);
|
||||
}).on("mouseup", function (event) {
|
||||
me.handerOut();
|
||||
}).on("mouseout", function (event) {
|
||||
me.handerOut();
|
||||
}).on("touchstart", function (event) {
|
||||
var e = event || window.event;
|
||||
me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
|
||||
me.handerIn();
|
||||
}).on("touchmove", function (event) {
|
||||
me.handerMove(event, "mobile");
|
||||
}).on("touchend", function (event) {
|
||||
me.handerOut();
|
||||
});
|
||||
};
|
||||
SliderUnlock.prototype.getIsOk = function() {
|
||||
return this.isOk;
|
||||
};
|
||||
|
||||
/**
|
||||
* 鼠标/手指接触滑动按钮
|
||||
*/
|
||||
SliderUnlock.prototype.handerIn = function () {
|
||||
var me = this;
|
||||
me.swipestart = true;
|
||||
me.min = 0;
|
||||
me.max = me.elm.width();
|
||||
};
|
||||
|
||||
/**
|
||||
* 鼠标/手指移出
|
||||
*/
|
||||
SliderUnlock.prototype.handerOut = function () {
|
||||
var me = this;
|
||||
//停止
|
||||
me.swipestart = false;
|
||||
//me.move();
|
||||
if (me.index < me.max) {
|
||||
me.reset();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 鼠标/手指移动
|
||||
* @param event
|
||||
* @param type
|
||||
*/
|
||||
SliderUnlock.prototype.handerMove = function (event, type) {
|
||||
var me = this;
|
||||
if (me.swipestart) {
|
||||
event.preventDefault();
|
||||
event = event || window.event;
|
||||
if (type == "mobile") {
|
||||
me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
|
||||
} else {
|
||||
me.index = event.clientX - me.lableIndex;
|
||||
}
|
||||
me.move();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 鼠标/手指移动过程
|
||||
*/
|
||||
SliderUnlock.prototype.move = function () {
|
||||
var me = this;
|
||||
if ((me.index + me.labelWidth) >= me.max) {
|
||||
me.index = me.max - me.labelWidth -2;
|
||||
//停止
|
||||
me.swipestart = false;
|
||||
//解锁
|
||||
me.isOk = true;
|
||||
}
|
||||
if (me.index < 0) {
|
||||
me.index = me.min;
|
||||
//未解锁
|
||||
me.isOk = false;
|
||||
}
|
||||
if (me.index+me.labelWidth+2 == me.max && me.max > 0 && me.isOk) {
|
||||
//解锁默认操作
|
||||
$('#label').unbind().next('#labelTip').
|
||||
text(me.opts.successLabelTip).css({'color': '#fff'});
|
||||
|
||||
me.success();
|
||||
}
|
||||
me.updateView();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 更新视图
|
||||
*/
|
||||
SliderUnlock.prototype.updateView = function () {
|
||||
var me = this;
|
||||
|
||||
me.sliderBg.css('width', me.index);
|
||||
me.elm.find("#label").css("left", me.index + "px")
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置slide的起点
|
||||
*/
|
||||
SliderUnlock.prototype.reset = function () {
|
||||
var me = this;
|
||||
|
||||
me.index = 0;
|
||||
me.sliderBg .animate({'width':0},me.opts.duration);
|
||||
me.elm.find("#label").animate({left: me.index}, me.opts.duration)
|
||||
.next("#lableTip").animate({opacity: 1}, me.opts.duration);
|
||||
me.updateView();
|
||||
};
|
||||
|
||||
/**
|
||||
* 检测元素是否存在
|
||||
* @param elm
|
||||
* @returns {boolean}
|
||||
*/
|
||||
SliderUnlock.prototype.checkElm = function (elm) {
|
||||
if($(elm).length > 0){
|
||||
return true;
|
||||
}else{
|
||||
throw "this element does not exist.";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 检测传入参数是否是function
|
||||
* @param fn
|
||||
* @returns {boolean}
|
||||
*/
|
||||
SliderUnlock.prototype.checkFn = function (fn) {
|
||||
if(typeof fn === "function"){
|
||||
return true;
|
||||
}else{
|
||||
throw "the param is not a function.";
|
||||
}
|
||||
};
|
||||
|
||||
window['SliderUnlock'] = SliderUnlock;
|
||||
})(jQuery, window, document);
|
||||
|
|
@ -1,17 +1,33 @@
|
|||
{% block body %}
|
||||
{% if session['logged_in'] %}
|
||||
|
||||
You're logged in already! <a href="/logout">Logout</a>.
|
||||
|
||||
{% else %}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
|
||||
<link rel="stylesheet" href="static/css/login_service.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
|
||||
<link href="static/css/slide-unlock.css" rel="stylesheet">
|
||||
<script src="static/js/jquery.js"></script>
|
||||
<script src="static/js/jquery.slideunlock.js"></script>
|
||||
<script>
|
||||
var slider
|
||||
let username,password,password2
|
||||
$(document).ready(function() {
|
||||
slider = new SliderUnlock("#slider", {
|
||||
successLabelTip: "验证成功"
|
||||
}, function() {
|
||||
|
||||
});
|
||||
slider.init(); // 初始化滑块解锁功能
|
||||
});
|
||||
|
||||
function signup(){
|
||||
let username = $("#username").val();
|
||||
let password = $("#password").val();
|
||||
let password2 = $("#password2").val();
|
||||
// 发起 AJAX 请求来处理注册
|
||||
username = $("#username").val().trim();
|
||||
password = $("#password").val().trim();
|
||||
password2 = $("#password2").val().trim();
|
||||
|
||||
// 基本表单验证
|
||||
if (username === "" || password === "" || password2 === "") {
|
||||
alert('输入不能为空!');
|
||||
return false;
|
||||
|
|
@ -28,8 +44,15 @@ You're logged in already! <a href="/logout">Logout</a>.
|
|||
alert('密码过于简单。(密码长度至少4位)');
|
||||
return false;
|
||||
}
|
||||
$.post("/signup", {'username': username, 'password': password},
|
||||
function (response) {
|
||||
is_ok = slider.getIsOk();
|
||||
if(!is_ok){
|
||||
alert('没有滑动验证');
|
||||
return false;
|
||||
}
|
||||
$.post("/signup", {
|
||||
'username': username,
|
||||
'password': password
|
||||
}, function(response) {
|
||||
if (response.status === '0') {
|
||||
alert('用户名' + username + '已经被注册。');
|
||||
window.location.href = "/signup";
|
||||
|
|
@ -37,7 +60,7 @@ You're logged in already! <a href="/logout">Logout</a>.
|
|||
alert('用户名密码验证失败。');
|
||||
window.location.href = "/signup";
|
||||
} else if (response.status === '2') {
|
||||
let f = confirm("恭喜，你已成功注册，你的用户名是"+username+'.\n点击“确认”开始使用，或点击“取消”返回首页');
|
||||
var f = confirm("恭喜，你已成功注册，你的用户名是" + username + '.\n点击“确认”开始使用，或点击“取消”返回首页');
|
||||
if (f) {
|
||||
window.location.href = '/' + username + '/userpage';
|
||||
} else {
|
||||
|
|
@ -46,27 +69,39 @@ You're logged in already! <a href="/logout">Logout</a>.
|
|||
} else if (response.status === '3') {
|
||||
alert(response.warn);
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
<p>{{ get_flashed_messages()[0] | safe }}</p>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<section class="signin-heading">
|
||||
<h1>Sign up</h1>
|
||||
</section>
|
||||
|
||||
<p><input type="username" id="username" placeholder="输入用户名" class="username"></p>
|
||||
<form>
|
||||
<p><input type="text" id="username" placeholder="输入用户名" class="username"></p>
|
||||
<p><input type="password" id="password" placeholder="输入密码" class="password"></p>
|
||||
<p><input type="password" id="password2" placeholder="确认密码" class="password"></p>
|
||||
<button type="button" class="btn" onclick="signup()">注册</button>
|
||||
|
||||
<div id="slider">
|
||||
<div id="slider_bg"></div>
|
||||
<span id="label">>></span> <span id="labelTip">-----滑动验证你是不是人类</span>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn" onclick="signup()">注册</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Bind click event to the signup button
|
||||
$(".btn").click(function() {
|
||||
// Trigger slider unlock
|
||||
var slider = new SliderUnlock("#slider");
|
||||
slider.isOk();
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue