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 ...
随机推荐
- Oracle面试题目及解答
这里的回答并不是十分全面,这些问题可以通过多个角度来进行解释,也许你不必在面试过程中给出完全详尽的答案,只需要通过你的解答使面试考官了解你对ORACLE概念的熟悉程度. 1. 解释冷备份和热备份的不同 ...
- Confusing Date Format UVALive 7711 给定mm-mm-mm格式的时间。年份（1900-1999）只给了后两位数，问有多少种合法的排列使时间正确。
/** 题目:Confusing Date Format UVALive 7711 链接:https://vjudge.net/contest/174844#problem/A 题意:给定mm-mm- ...
- [Android] Ubuntu下Eclipse || Android Studio识别不了手机的官方解决方案
最近在转移开发平台,Android Studio一直都识别不了手机,但Eclipse却可以.经过一番调查后,发现是自己一点所以然导致的.接下来直接奉上解决教程 解决教程 在命令行终端输入lsusb命令 ...
- flask 邮箱配置
http://blog.csdn.net/stan_pcf/article/details/51098126 先进入邮箱设置 POP3/SMTP/IMAP 下面代码来自知乎 https://www.z ...
- .NET学习笔记（2）
--在子页面设置模板页的图片: ( this.Master.FindControl(“imgHead”) as Image ).ImageUrl = “upload/image1.jpg” ; 文件的 ...
- Matrix_tree Theorem 矩阵树定理学习笔记
Matrix_tree Theorem: 给定一个无向图, 定义矩阵A A[i][j] = - (<i, j>之间的边数) A[i][i] = 点i的度数 其生成树的个数等于 A的任意n ...
- 【BZOJ】2060: [Usaco2010 Nov]Visiting Cows 拜访奶牛（树形dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=2060 裸的树形dp d[x][1]表示访问x的数量,d[x][0]表示不访问x的数量 d[x][1] ...
- Android 消息处理源代码分析（2）
Android 消息处理源代码分析(1)点击打开链接 继续接着分析剩下的类文件 Looper.java public final class Looper { final MessageQueue m ...
- CSS中的绝对定位（absolute）误区
这几天在慕课上看视频学习,偶然听到几个老师都说:CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position: ...
- 微信小程序 事件
事件详解 事件分类 事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. WXML的冒泡事件列 ...