EnglishPal/app/templates/signup.html

107 lines
4.2 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{% 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">
<script src="../static/js/jquery.js"></script>
<script>
function signup() {
let username = $("#username").val();
let password = $("#password").val();
let password2 = $("#password2").val();
if (username === "" || password === "" || password2 === ""){
alert('输入不能为空!');
return false;
}
if (password !== password2) {
alert('确认密码与输入密码不一致!');
return false;
}
if (password.length < 4) {
alert('密码过于简单。(密码长度至少4位)');
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') {
let 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>
<!--增加两个js函数Change()用于检测用户刷新验证码的请求并发送给后端以切换验证码图片Check()用以检查用户输入的验证码是否与图片匹配-->
<script>
function Change() {
$.ajax({
url: '{{ url_for('get_captcha') }}',
async: true,
type: "GET",
success: function (data) {
document.getElementById("captcha").src = data;
}
})
}
</script>
<script>
function Check() {
var img = document.getElementById("captcha").src;
var img_path = img.replace("\\", "/").split("/");
var img_name = img_path[img_path.length - 1];
img_name = img_name.split(".")[0];
var your_in = document.getElementById("your_in").value;
if(img_name.toLowerCase() == your_in.toLowerCase()){
alert("验证成功!");
return true;
}
else {
alert("验证错误!");
return false;
}
}
window.onload = Change();
</script>
<p>{{ get_flashed_messages()[0] | safe }}</p>
<div class="container">
<section class="signin-heading">
<h1>Sign Up</h1>
</section>
<form action="/signup" method="POST" onsubmit="return Check()">
<p><input type="username" name="username" placeholder="输入用户名" required="required" class="username"></p>
<p><input type="password" name="password" placeholder="输入密码" class="password"></p>
<p><input type="password" name="password2" placeholder="确认密码" class="password"></p>
<div style="font-size: medium">
<p align="center"><img src="" id="captcha" class="image"></p>
<p align="center"><a href="javascript:void(0)" onclick="Change()">看不清楚,换一张</a></p>
<input id="your_in" placeholder="输入验证码" class="password">
</div>
<button type="submit" class="btn" >注册</button>
</form>
</div>
{% endif %}
{% endblock %}