133 lines
4.5 KiB
HTML
133 lines
4.5 KiB
HTML
{% 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 containsDigitsLettersSpecialCharacters(s) {
|
||
let resultD = 0, resultL = 0, resultS = 0;
|
||
|
||
// Digit test
|
||
'0123456789'.split('').forEach((x) => {
|
||
if (s.includes(x))
|
||
resultD = 1;
|
||
});
|
||
|
||
// Letter test
|
||
resultL = /[a-z]/i.test(s);
|
||
|
||
// Special charater test
|
||
'+-*/,.:;/\[]<>$%&()!?^~'.split('').forEach((x) => {
|
||
if (s.includes(x))
|
||
resultS = 1;
|
||
});
|
||
|
||
return resultD + resultL + resultS == 3;
|
||
}
|
||
|
||
function signup(){
|
||
// 发起 AJAX 请求来处理注册
|
||
username = $("#username").val().trim();
|
||
password = $("#password").val().trim();
|
||
password2 = $("#password2").val().trim();
|
||
|
||
// 基本表单验证
|
||
if (username === "" || password === "" || password2 === "") {
|
||
alert('输入不能为空!');
|
||
return false;
|
||
}
|
||
if (password.includes(' ') || password2.includes(' ')) {
|
||
alert('输入不能包含空格!');
|
||
return false;
|
||
}
|
||
if (password !== password2) {
|
||
alert('确认密码与输入密码不一致！');
|
||
return false;
|
||
}
|
||
if (password.length < 4) {
|
||
alert('密码过于简单。(密码长度至少4位)');
|
||
return false;
|
||
}
|
||
if (!containsDigitsLettersSpecialCharacters(password)) {
|
||
alert('密码过于简单。(密码要包括数字，字母，特殊符号)');
|
||
return false;
|
||
}
|
||
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";
|
||
} else if (response.status === '1') {
|
||
alert('用户名密码验证失败。');
|
||
window.location.href = "/signup";
|
||
} else if (response.status === '2') {
|
||
var f = confirm("恭喜，你已成功注册，你的用户名是" + username + '.\n点击“确认”开始使用，或点击“取消”返回首页');
|
||
if (f) {
|
||
window.location.href = '/' + username + '/userpage';
|
||
} else {
|
||
window.location.href = '/';
|
||
}
|
||
} 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>
|
||
|
||
<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>
|
||
|
||
<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 %}
|