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 ...
随机推荐
- 详解Java中格式化日期的DateFormat与SimpleDateFormat类
DateFormat其本身是一个抽象类,SimpleDateFormat 类是DateFormat类的子类,一般情况下来讲DateFormat类很少会直接使用,而都使用SimpleDateFormat ...
- linux 从百度网盘下载文件的方法
linux 从百度网盘下载文件的方法 发表于2015 年 月 日由shenwang 方法1.wget wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括 ...
- poj3253 优先队列
Farmer John wants to repair a small length of the fence around the pasture. He measures the fence an ...
- PBOC联机交易中ARQC及ARPC的计算
金融IC卡在申请联机交易时,终端会进行发卡行认证,验证卡片的合法性,终端通过GAC得到卡片返回的ARQC,与终端自身产生的ARQC进行比较,如果一致,则说明是由发卡行发行的合法卡片,同时对ARQC及认 ...
- java性能监控工具:jmap命令详解
.命令基本概述 Jmap是一个可以输出所有内存中对象的工具,甚至可以将VM 中的heap,以二进制输出成文本.打印出某个java进程(使用pid)内存内的,所有‘对象’的情况(如:产生那些对象,及其数 ...
- 总结几个关于 jQuery 用法
有关 jquery 用法 目录: $.trim() $.inArray() $.getJSON() 事件委托 on 遍历closest() ajaxSubmit() 拖拽排序 dragsort() 进 ...
- shellscript
shell script 运行方法 -------------------------------------- 1. 以命令方式执行( 一般是以这种方式执行 ) 首先修改档案权限可以运行 chmod ...
- Centos7安装Apache Http服务器无法访问如何解决
1. 安装Apache组件 [root@mycentos shell]# yum install httpd 2. 安装成功后,检测有无httpd进程 [root@mycentos shell]# p ...
- 组件(Conponent)是图形用户界面最基本的部分
组件(Conponent)是图形用户界面最基本的部分,也称为构件 ,是可以以图形化的方式显示在屏幕上,并能与用户进行交互的对象,例如一个按钮,一个标签等. 组件不能独立地显示出来,必须将其放在一定的容 ...
- Android开发人员必须掌握的10 个开发工具+应该深入学习的10个开源应用项目
一.Android开发人员必须掌握的10 个开发工具 Android SDK 本身包含很多帮助开发人员设计.开发.测试和发布 Android 应用的工具,在本文中,我们将讨论 10 个最常用的工具. ...