django--博客--forms组件-用户注册
---------------------------------------------前端页面简易代码-------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="/static/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
#img_head {
display: none;
}
</style>
</head>
<body>
<div class="container-fluid box">
<h1></h1>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Register</h3>
</div>
<div class="panel-body">
<form id="form">
{% csrf_token %}
{% for foo in my_form %}
<div class="form-group">
<label for="{{ foo.auto.id }}">{{ foo.label }}</label>
<span class="{{ foo.auto_id }} pull-right" style="color: red" id="span"></span>
{{ foo }}
</div>
{% endfor %}
{# 上传头像 #}
<div class="form-group">
<label for="img_head">头像
<img src="/static/img/default.png" alt="" width="80" height="80" id="my_head">
</label>
<input type="file" id="img_head" class="form-control">
</div>
</form>
<input type="button" value="注册" class="btn btn-primary pull-right" id="btn">
<span id="valid_code_error" class="pull-left" style="color: red"></span>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//上传头像,在注册页面显示
$('#img_head').change(function () {
var file_obj = $('#img_head')[0].files[0]; var filereader = new FileReader(); filereader.readAsDataURL(file_obj); filereader.onload = function () {
$('#my_head').attr('src', filereader.result)
}
}); $('#btn').click(function () {
var formdata = new FormData(); var arr = $('#form').serializeArray();
{#console.log(arr);#} $.each(arr, function (key, obj) {
formdata.append(obj.name, obj.value)
});
formdata.append('img_head', $('#img_head')[0].files[0]);
{#console.log(arr);#} $.ajax({
url: '/register/',
type: 'post',
processData: false,
contentType: false,
data: formdata,
success: function (data) { if (data['msg'] == 100) {
window.location.href = "/index/"
} else if (data.msg['__all__']) {
$('#valid_code_error').html(data.msg['__all__'])
} else {
for (i in data.msg) {
console.log(i);
id = ".id_" + i;
console.log(data.msg[i][0]);
$(id).text(data.msg[i][0])
//上面的回调函数的内容为:产生不符合规范的注册信息,在注册页面显示出来
} }
}
})
});
//失去焦点后,在注册页面产生的错误提示清空
$('#btn').blur(function () {
$(span).empty();
$('#valid_code_error').empty()
})
</script>
</html>
----------------------------------------------forms组件表-------------------------------------------------------------------------------
from django import forms
from django.forms import widgets
from django.core.exceptions import ValidationError
from app01 import models class RegForm(forms.Form):
username = forms.CharField(max_length=16,min_length=3,label='用户名',
widget=widgets.TextInput(attrs={'class':'form-control'}),
error_messages={'max_length': '最长是16', 'min_length': '最短是3', 'required': '这个必须填'})
password = forms.CharField(max_length=16,min_length=3,label='密码',
widget=widgets.PasswordInput(attrs={'class':'form-control'}),
error_messages={'max_length': '最长是16', 'min_length': '最短是3', 'required': '这个必须填'})
re_password = forms.CharField(max_length=16, min_length=3, label='确认密码',
widget=widgets.PasswordInput(attrs={'class': 'form-control'}),
error_messages={'max_length': '最长是16', 'min_length': '最短是3', 'required': '这个必须填'})
email = forms.EmailField(label='邮箱',widget=widgets.TextInput(attrs={'class': 'form-control'}),
error_messages={'required': '这个必须填', 'invalid': '不符合邮箱格式'})
# 局部钩子函数,校验用户在注册时,用户名存不存在
def clean_username(self):
name = self.cleaned_data.get('username')
# 去数据库校验
ret = models.UserInfo.objects.filter(username=name).first()
if ret:
raise ValidationError('用户名已存在')
return name # 全局校验钩子函数,校验注册时两次输入的密码是否一致
def clean(self):
pwd = self.cleaned_data.get('password')
re_pwd = self.cleaned_data.get('re_password')
if pwd and re_pwd:
if pwd == re_pwd:
return self.cleaned_data
else:
raise ValidationError('两次密码不一致')
-----------------------------注册views视图函数-----------------------------------------------------
from django.http import JsonResponse
from app01 import myforms
from app01 import models def register(request):
if request.method == 'GET':
my_form = myforms.RegForm()
return render(request,'register.html',locals())
# elif request.is_ajax(): 方法一---判断request的提交方式.
elif request.method == 'POST': #方法二
response = {'status': 100, 'msg': 100}
print(request.POST)
my_form = myforms.RegForm(request.POST)
if my_form.is_valid():
dic = my_form.cleaned_data
dic.pop('re_password')
my_file = request.FILES.get('img_head')
if my_file:
dic['avatar']=my_file
user = models.UserInfo.objects.create_user(**dic)
else:
response['status']=101
response['msg']=my_form.errors
return JsonResponse(response)
补充:可以在前段js代码中单独加每一项注册内容是否合规
前台 ------ 用户名是否存在
$("#id_username").blur(function () {
$.ajax({
url:'/check_username/',
type:'post',
//name加引号不加引号都可以
data:{name:$(this).val(),'csrfmiddlewaretoken':'{{ csrf_token }}'},
success:function (data) {
console.log(data)
if(data.status==101){
$('#id_username').next().html(data.msg).parent().addClass('has-error')
}
} })
}) 后台判断逻辑 def check_username(request):
response={'status':100,'msg':None}
name=request.POST.get('name')
print(name)
user=models.UserInfo.objects.filter(username=name).first()
if user:
response['status']=101
response['msg']='用户名已被占用'
return JsonResponse(response)
django--博客--forms组件-用户注册的更多相关文章
- Django1.8教程——从零开始搭建一个完整django博客（一）
第一个Django项目将是一个完整的博客网站.它和我们博客园使用的博客别无二致,一样有分类.标签.归档.查询等功能.如果你对Django感兴趣的话,这是一个绝好的机会.该教程将和你一起,从零开始,搭建 ...
- 使用 Nginx 和 Gunicorn 部署 Django 博客(转)
原文:http://zmrenwu.com/post/20/ http://www.siar.me/post/9/ 针对很多朋友反映按照教程的做法始终只能看到 Nginx 欢迎页面的问题,Tian ...
- Django博客开发实践，初学者开发经验
python,Django初学者,开发简易博客,做了一下笔记,记录了开发的过程,功力浅薄,仅供初学者互相 交流,欢迎意见建议.具体链接:Django博客开发实践(一)--分析需求并创建项目 地址:ht ...
- django博客项目8：文章详情页
首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...
- django博客项目6：Django Admin 后台发布文章
在此之前我们完成了 Django 博客首页视图的编写,我们希望首页展示发布的博客文章列表,但是它却抱怨:暂时还没有发布的文章!如它所言,我们确实还没有发布任何文章,本节我们将使用 Django 自带的 ...
- django博客项目5：博客首页视图(2)
真正的 Django 博客首页视图 在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应.不过我们仅仅 ...
- django博客项目3：创建 Django 博客的数据库模型
设计博客的数据库表结构 博客最主要的功能就是展示我们写的文章,它需要从某个地方获取博客文章数据才能把文章展示出来,通常来说这个地方就是数据库.我们把写好的文章永久地保存在数据库里,当用户访问我们的博客 ...
- django博客项目2.建立 Django 博客应用
建立博客应用 我们已经建立了 Django 博客的项目工程,并且成功地运行了它.不过到目前为止这一切都还只是 Django 为我们创建的项目初始内容,Django 不可能为我们初始化生成博客代码,这些 ...
- Django 博客开发教程目录索引
Django 博客开发教程目录索引 本项目适合 0 基础的 Django 开发新人. 项目演示地址:Black & White,代码 GitHub 仓库地址:zmrenwu/django-bl ...
随机推荐
- 正常断开连接情况下，判断非阻塞模式socket连接是否断开
摘自:http://blog.chinaunix.net/uid-15014334-id-3429627.html 在UNIX/LINUX下, 1,对于主动关闭的SOCKET, recv返回-1,而且 ...
- js模块化规范AMD、CMD、CommonJS...
1. AMD 1.1 什么是AMD? AMD 英文名 Asynchronous Module Definition ,中文名 异步模块定义 .这是一个浏览器模块化开发的规范. 由于浏览器环境执行环境的 ...
- Jquery学习笔记（1）--JQuery原理，与JS对象互换，核心函数
js对象转jQuery对象,$('num'), jQuery对象转js对象,$('num')[0],或$('num').get(0). 1.点击换行,each(),html(),attr(),每个h1 ...
- linux学习笔记18---目录结构
对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统至关重要,下面 ...
- mysql唯一主键生成代码
<insert id="insertPeople" parameterType="PeopleSchedule"> <selectKe ...
- jQuery 实战读书笔记之第三章：操作 jQuery 集合
创建新 HTML 元素 $('<div>Hello</div>'); /* 创建等价的空 div 元素 */ $('<div>'); $('<div /> ...
- debian下为arm开发板创建基于debian或emdebian的根文件系统
Debian系统本身包含对arm的支持,其包含的软件包最多,但是最终的文件系统要大一些. emdebian 是一个非常好用的嵌入式linux操作系统,其基于debian的特点对于熟悉debian系统的 ...
- ARP-Address Resolution Protocol-地址解析协议
主要内容摘自:图解TCP/IP ARP是一种解决地址问题的协议.以目标IP地址为线索,用来定位下一个应该接受数据分包的网络设备的mac地址. 如果目标主机不在同一个链路上时,可以通过ARP查找下一跳路 ...
- hdu6076 Security Check 分类dp 思维
/** 题目:hdu6076 Security Check 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6076 题意:有两个队列在排队,每一次警察可以检 ...
- MapReduce实战（六）共同粉丝
需求: 利用mapReduce实现类似微博中查找共同粉丝的功能.如下: A:B,C,D,F,E,OB:A,C,E,KC:F,A,D,ID:A,E,F,LE:B,C,D,M,LF:A,B,C,D,E,O ...