写一个注册页面加验证注册成功后保存
时间: 2024-03-26 19:35:51 浏览: 16
这里提供一个基于Python Flask框架的注册页面示例,包括前端页面与后端验证和保存数据的过程:
前端页面(HTML/CSS/JS):
```html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/localization/messages_zh.min.js"></script>
<script>
$(document).ready(function() {
$("#register-form").validate({
rules: {
username: {
required: true,
minlength: 4
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
equalTo: "#password"
},
email: {
required: true,
email: true
},
phone: {
required: true,
digits: true
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名至少4个字符"
},
password: {
required: "请输入密码",
minlength: "密码至少6个字符"
},
confirm_password: {
required: "请确认密码",
equalTo: "两次输入密码不一致"
},
email: {
required: "请输入邮箱",
email: "请输入有效的邮箱地址"
},
phone: {
required: "请输入手机号码",
digits: "请输入有效的手机号码"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<div class="container">
<h1>注册页面</h1>
<form id="register-form" method="POST" action="{{ url_for('register') }}">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="confirm_password">确认密码</label>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请再次输入密码">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="phone">手机号码</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号码">
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
</div>
</body>
</html>
```
后端验证和保存数据(Python Flask):
```python
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('register.html')
@app.route('/register', methods=['POST'])
def register():
username = request.form.get('username')
password = request.form.get('password')
email = request.form.get('email')
phone = request.form.get('phone')
# 这里可以加入更多的验证逻辑,比如检查用户名是否已经存在等
# 保存数据到数据库或文件中
with open('users.txt', 'a') as f:
f.write('{}\t{}\t{}\t{}\n'.format(username, password, email, phone))
return render_template('success.html')
if __name__ == '__main__':
app.run(debug=True)
```
其中,`register.html`是前面提供的前端页面,`success.html`是一个简单的成功页面,这里不再赘述。在`register()`函数中,我们从`request.form`中获取提交的表单数据,并进行验证和保存。这里只是一个简单的示例,具体的验证和保存逻辑可以根据实际需求进行修改。