BBS注册功能
BBS注册功能
一、后端
1.组件校验数据
"""
@author RansySun
@create 2019-11-03-11:35
"""
from django import forms
from django.forms import widgets
from app import models
class MyRegForm(forms.Form):
"""创建注册标签"""
username = forms.CharField(min_length=3, max_length=9, label='用户名',
error_messages={
'min_length': '用户名不能少于六位',
'max_length': '用户名不能大于九位',
'required': '用户名不能为空'
}, widget=widgets.TextInput(attrs={'class': 'form-control'}))
password = forms.CharField(min_length=3, max_length=8, label='密 码',
error_messages={
'min_length': '密码不能少于六位',
'max_length': '密码不能多于八位',
'required': '密码不能为空'
}, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
confirm_password = forms.CharField(min_length=3, max_length=8, label='确认密码',
error_messages={
'min_length': '确认密码不能少于六位',
'max_length': '确认密码不能多于八位',
'required': '确认密码不能为空'
}, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
email = forms.EmailField(label='邮箱',
error_messages={
'required': '邮箱不能为空',
'invalid': '邮箱格式不正确'
}, widget=widgets.EmailInput(attrs={'class': 'form-control'}))
def clean_username(self):
"""局部钩子,判断用户是否已经存在"""
username = self.cleaned_data.get('username')
user_obj = models.UserInfo.objects.filter(username=username)
if user_obj:
self.add_error('username', "用户已经存在")
return username
def clean(self):
"""全局钩子, 判断用户名是否相同"""
password = self.cleaned_data.get('password')
confirm_password = self.cleaned_data.get('confirm_password')
if not (password == confirm_password):
self.add_error('confirm_password', '两次密码不一致')
return self.cleaned_data
2.注册功能实现
# url.py
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^register/', views.register), # 注册
]
# views.register
def register(request):
"""
注册功能实现
:param request:
:return:
"""
# 组件校验数据
form_obj = MyRegForm()
if request.method == 'POST':
# 向前台返回结果信息
back_dic = {'code': 1000, "msg": ''}
form_obj = MyRegForm(request.POST)
# print(request.POST)
# print(request.FILES)
# 校验数据
if form_obj.is_valid(): # 验证所有表单是否全部通过
# form_obj.cleaned_data # {'username': 'randy', 'password': '123456', 'confirm_password': '123456', 'email': '2214644978@qq.com'}
cleaned_data = form_obj.cleaned_data # 所有验证通过的键值对
# 移除确认密码
cleaned_data.pop('confirm_password')
file_obj = request.FILES.get('avatar') # 获取用户头像, 如果没有上传, 则为空
if file_obj:
"""
获取用户上传头像之后,一定要判断用户是否上传了,
如果没有上传,字典中就不会加avatar键值对
"""
cleaned_data['avatar'] = file_obj
# 通过 ** 打散字典的方式作为参数, key必须与数据库中字段中一模一样
models.UserInfo.objects.create_user(**cleaned_data)
back_dic['url'] = '/login/'
else:
# 向前台返回发生错误信息
back_dic['code'] = 2000
back_dic['msg'] = form_obj.errors
print(back_dic)
return JsonResponse(back_dic)
return render(request, '01register.html', locals())
二、前端设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'bootstrap/js/jquery.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<h1 class="text-center">注册界面</h1>
<form action="" class="form-horizontal" id="myform" novalidate>
{% csrf_token %}
{# 标签 #}
{% for f_obj in form_obj %}
<div class="form-group">
<label for="{{ f_obj.auto_id }}">{{ f_obj.label }} </label>
{{ f_obj }}
<span style="color:red" class="pull-right"></span>
</div>
{% endfor %}
{# 头像通过点击图片上传头像,隐藏file标签#}
<div class="form-group">
<label for="myfile">
头像<img src="{% static 'img/default1.png' %}" alt="" id="avatar" width="80px" height="80px"
style="margin: 10px 10px;border-radius: 50%">
</label>
<input type="file" id="myfile" name="avatar" style="display: none;">
</div>
{# 注册按钮，通过ajax检测登录信息, 报错提示#}
<input type="button" class="btn btn-success pull-right" id='commit' value="注册">
</form>
</div>
</div>
</div>
<script>
// 文件阅读器,
$('#myfile').change(function () {
// 将图片改为用户上传的图片
// 1.产生文件阅读器队形
var fileReader = new FileReader();
// 2.获取用户上传的文件
var fileUp = $(this)[0].files[0];
// 3.让文件阅读器读取该文件
fileReader.readAsDataURL(fileUp);
// 4.利用文件阅读器将文件展示出来
fileReader.onload = function () {
$('#avatar').attr('src', fileReader.result)
}
});
$('#commit').on('click', function () {
var formData = new FormData();
// serializeArray() 获取form表单中的键值对, each循环获取数组中内容
$.each($('#myform').serializeArray(), function (index, obj) {
formData.append(obj.name, obj.value)
});
// 添加上传的图片
formData.append('avatar', $('#myfile')[0].files[0]);
$.ajax({
url: '',
type: 'post',
data: formData,
contentType:false,
processData:false,
success: function (data) {
if (data.code == 1000) {
window.location.href = data.url
}else {
$.each(data.msg, function (index, obj) {
// data.msg是字段，所以index是key, obj value值是一个报错的数组信息
// 通过index手动拼接input框字段
var tagId = '#id_'+index;
{#alert(tagId)#}
// 获取出错的标签下面的span标签添加报错的信息,给父标签添加一个红色错误边框
$(tagId).next().text(obj[0]).parent().addClass('has-error')
});
}
}
});
$('input').focus(function () {
$(this).next().text('').parent().removeClass('has-error')
});
});
</script>
</body>
</html>
BBS注册功能的更多相关文章
- BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现
1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...
- BBS论坛 注册功能
三.注册功能 # views.py文件 def register(request): back_dic = {'code': 100, 'msg': ''} form_obj = myforms.My ...
- BBS登录与注册功能
登录功能 视图函数 def my_login(request): if request.method == 'GET': return render(request, 'login.html') el ...
- 1206 BBS注册
目录 昨日内容 BBS项目 1.项目开发流程 2.表设计 用户表 个人站点表 文章标签表 文章分类表 文章表 文章的点赞点踩表 文章的评论表 项目 昨日内容 昨日内容 基于django中间件实现功能的 ...
- python实现软件的注册功能（机器码+注册码机制）
http://www.cnblogs.com/cquptzzq/p/5940583.html 一.前言: 目的:完成已有python图像处理工具的注册功能 功能:用户运行程序后,通过文件自动检测认证状 ...
- Winform 注册机通用软件注册功能之建立有效的软件保护机制
本文转载:http://www.cnblogs.com/umplatform/archive/2013/01/23/2873001.html 众所周知,一些共享软件往往提供给使用者的是一个功能不受限制 ...
- springMVC+Java验证码完善注册功能
这篇文章简单的写了一个java验证码,为之前写过的springMVC注册功能加上验证码,验证码的作用就不多说了,防止机器人程序恶意注册什么的.. 其中User.java,加上了password和cod ...
- gitlab 取消注册功能
gitlab 默认安装完成以后是允许用户注册,公司内部使用所以准备禁用了注册功能,只允许管理员从后台开通权限: 1.进入"Admin Area" 2.在左边菜单栏最低下点击&quo ...
- 7、ABPZero系列教程之拼多多卖家工具 修改注册功能
本篇开始进入重头戏,之前的几篇文章都是为了现在的功能作准备.前面教程已经讲到修改User表结构,接下来就需要修改注册逻辑代码. 注册页面 修改Register.cshtml,备注如下代码: 文件路径: ...
随机推荐
- yagmail四行代码发送邮件
yagmail四行代码发送邮件 import yagmail # 链接邮箱服务器 yag = yagmail.SMTP(user="xxxx@163.com", password= ...
- wget 403 forbidden
CMD: wget --user-agent="Mozilla" down_url wget -U Mozilla 下载地址 wget -U NoSuchBrowser/1.0 下 ...
- Codeforces 392 C Unfair Poll（模拟）
题意:老师点名顺序规则如下:第1排,第2排,……,第n-1排,第n排,第n-1排,……,第2排,第1排,第2排,……,第n-1排,第n排,……对于每排都是从左到右依次点名,问点名k个人后,所有人中最多 ...
- python常用代码、问题汇总
1.生成dataframe数据 5.读取带 ','分隔符的txt文件 4.DataFrame格式数据处理中报错 2.安装库时出现如下错误: 3.得到股票交易日数据 1.生成dataframe数据 im ...
- 不得了的try catch
try catch:几乎所有语言都有这个语句 try { //可能会导致错误的代码 } catch (error) { //在错误发生时怎么处理 }finally { //即使报错始终执行 } 1. ...
- Kali桥接模式下配置静态ip
以管理员身份运行虚拟机 打开控制面板-->网络和Internet-->更改适配器 再在虚拟机处桥接到这个WLAN2 点击 编辑-->编辑虚拟网卡 没有网卡就点上图的添加网络作为桥接网 ...
- Day1-T2
原题目 在小X的认知里,质数是除了本身和1以外,没有其他因数的数. 但由于小 X对质数的热爱超乎寻常,所以小X同样喜欢那些虽然不是质数, 但却是由两个质数相乘得来的数. 于是,我们定义一个数小 X喜欢 ...
- swift中block的使用
在OC中习惯用block来传值,而swift中,block被重新定义了一下,叫闭包: 使用的技巧:谁定义谁传值: 案例使用A.B控制器: 1~4步在B中执行,最后在A中执行: - B控制器: 1- ...
- su鉴定故障 普通用户无法切换回root用户处理-centos7网卡速率设置
1.1 检查/etc目录下passwd的权限[root@dev /]# ll/etc/passwd-rw-r--r--. 1 root root 1975 5月 27 06:04/etc/passw ...
- The 2019 China Collegiate Pro gramming Contest Harbin Site （F. Fixing Banners）
F. Fixing Banners time limit per test 1 second memory limit per test 512 megabytes input standard in ...