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,备注如下代码: 文件路径: ...
随机推荐
- spring源码 继承AttributeAccessor的BeanDefinition接口
/** * A BeanDefinition describes a bean instance, which has property values, * constructor argument ...
- 线段树&树状数组与离散化的妙用
牛客2019多校联盟Day7 Fine the median 题意: 每次给数组插入区间[Li,Ri] 内的所有数,每操作一次查询中位数. 遇到这题真的算是巧合,然而就是这种冥冥之中的缘分,给了我线 ...
- Arduino - -- 串口双向通信
需要用到Arduino UNO的串口双向通信功能,以下源码: int val; void setup() { Serial.begin(9600); // opensserial port, se ...
- mongodb安装到配置问题
一.所有问题 Xshell 连接不上 报错类型:Could not connect to '192.168.122.1' (port 22): Connection failed.原因:IP地址未生成 ...
- C++ STD Gems05
find.find_if.find_first_of.mismatch.search.adjacent_find #include <iostream> #include <vect ...
- 总结不进入Mysql，执行Mysql命令的5种方法
不进入mysql,执行mysql命令 直接使用-e 命令 mysql -u root -p xxxxxx -e "show databases;" 使用eof写入命令 mysql ...
- python 的第一个界面程序(PyQt5)
这里用到了python的一个第三qt库PyQt5,API与qt几乎完全一样(科学严谨下...) from PyQt5.QtWidgets import QApplication, QMainWindo ...
- cnblogs今天挂了
刚打算搬进来常驻cnblogs,好死不死,它今天11点40分左右挂了.真是不让人省心: 今天把这后面这几个月的随笔放过来,希望能不会被清掉:
- consul配置
参考:https://blog.csdn.net/achenyuan/article/details/80389410 gcp: consul安装目录:/usr/local/bin/consul co ...
- python *args 和 ** kwargs
可变长度的参数 *args的使用方法 *args 用来将参数打包成tuple给函数体调用 可见,1这个参数,被打包成了一个元组 def func(*args): print(args,type(arg ...