一.直接上代碼
1.register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#available{
color: blue;
display: none;
}
#unavailable{
color:yellow;
display: none;
}
</style>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
$('#uname').blur(function () {
$.get({
url:'/checkname',
data:{
name:$('#uname').val()
},
success:function (data) {
console.log(data);
let x = JSON.parse(data);
if (x['available']){
$('#available').css('display' , 'inline');
$('#unavailable').css('display' , 'none');
}else{
$('#available').css('display','none');
$('#unavailable').css('display' , 'inline');
}
}
});
});
});
</script>
</head>
<body>
<form action="/doregister" method="post">
<span>用戶名:</span>
<input type="text" required name="username" id="uname">
<span id="available">用戶名可以使用</span>
<span id="unavailable">用戶名已經被佔用了</span>
<br>
<span>密碼:</span><input type="password" required name="password"><br>
<input type="submit" value="註冊">
</form>
</body>
</html>
2. app.py(Flask服務器):
import json
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
@app.route('/register')
def register():
return render_template('register.html')
@app.route('/checkname')
def check_name():
name = request.args['name']
username = ['zhangsan', 'lisi', 'wangwu']
if name in username:
return json.dumps({'available':False})
else:
return json.dumps({'available':True})
