基于form组件的注册
Posted liujie12
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于form组件的注册相关的知识，希望对你有一定的参考价值。
基于form组件的注册
urls.py
from django.contrib import admin
from django.urls import path
from blog import views
urlpatterns = [
path(‘admin/‘, admin.site.urls),
#注册
path(‘register/‘, views.register),
]
views.py
#注册视图函数
def register(request):
form_obj = forms.RegForm()
if request.method == "POST":
form_obj = forms.RegForm(request.POST)
#帮我做校验
if form_obj.is_valid():
#校验通过，去数据库创建一个新的用户
# 所以经过校验的数据都保存在 form_obj.cleaned_data (一个大 字典 中)
# print(form_obj.cleaned_data) #{‘name‘: ‘某某某‘, ‘pwd‘: ‘1234567‘, ‘re_pwd‘: ‘1234567‘}
del form_obj.cleaned_data["re_password"] # 删除字典中的 re_pwd 因为数据库中没有这个属性
models.UserInfo.objects.create_user(**form_obj.cleaned_data)
return HttpResponse("注册成功！")
else:
print(form_obj.errors)
return HttpResponse("出错啦！")
return render(request, ‘register.html‘,{"form_obj":form_obj})
register.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>注册</title> <meta name="viewport" content="width=device-width, initial-scale=1"> {% load static %} <link rel="stylesheet" href="{% static ‘bootstrap/css/bootstrap.min.css‘ %}"> <style> .container { margin-top: 100px; } {# 头像图片#} #avatar_img { width: 80px; height: 50px; } {# 隐藏选择图片的按钮#} #id_avatar { display: none; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <form action="" method="post" class="form-horizontal" enctype="multipart/form-data"> {% csrf_token %} {# 用户名#} <div class="form-group {% if form_obj.username.error.0 %}has-error{% endif %}"> <label class="col-sm-2 control-label" for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}</label> <div class="col-sm-10"> {{ form_obj.username }} <span class="help-block">{{ form_obj.username.error.0 }}</span> </div> </div> {# 密码#} <div class="form-group {% if form_obj.password.error.0 %}has-error{% endif %}"> <label class="col-sm-2 control-label" for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}</label> <div class="col-sm-10"> {{ form_obj.password }} <span class="help-block">{{ form_obj.password.error.0 }}</span> </div> </div> {# 确认密码#} <div class="form-group {% if form_obj.re_password.error.0 %}has-error{% endif %}"> <label class="col-sm-2 control-label" for="{{ form_obj.re_password.id_for_label }}">{{ form_obj.re_password.label }}</label> <div class="col-sm-10"> {{ form_obj.re_password }} <span class="help-block">{{ form_obj.re_password.error.0 }}</span> </div> </div> {# 邮箱#} <div class="form-group {% if form_obj.email.error.0 %}has-error{% endif %}"> <label class="col-sm-2 control-label" for="{{ form_obj.email.id_for_label }}">{{ form_obj.email.label }}</label> <div class="col-sm-10"> {{ form_obj.email }} <span class="help-block">{{ form_obj.email.error.0 }}</span> </div> </div> {# 头像 因为在forms.py中没有这个input选项，只能自己写#} <div class="form-group"> <label class="col-sm-2 control-label">头像</label> <div class="col-sm-10"> {# 实现了点击图片相当于点击 选择头像按钮#} <label for="id_avatar"><img id="avatar_img" src="/static/img/girl.png" alt=""></label> <input type="file" name="avatar" id="id_avatar"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-2"> <input type="submit" value="注册" class="btn btn-success"> </div> </div> </form> </div> </div> </div> <script src="{% static ‘jquery-3.2.1.min.js‘ %}"></script> <script src="{% static ‘bootstrap/js/bootstrap.min.js‘ %}"></script> </body> </html>
自己写的forms.py
‘‘‘
BBS 用到的form类
‘‘‘
from django import forms
#定义一个注册的form类
class RegForm(forms.Form):
username = forms.CharField(
max_length=16,
label="用户名",
widget=forms.widgets.TextInput(
attrs={"class": "form-control"}
),
error_messages={
"max_length":"用户名最长16位",
"require":"用户名不能为空"
}
)
password = forms.CharField(
min_length=6,
label="密码",
error_messages={
"min_length": "密码至少6位",
"require": "密码不能为空"
},
widget=forms.widgets.PasswordInput(
render_value=True,
attrs={"class":"form-control"}
)
)
re_password = forms.CharField(
min_length=6,
label="确认密码",
error_messages={
"require": "确认密码不能为空"
},
widget=forms.widgets.PasswordInput(
render_value=True,
attrs={"class": "form-control"}
)
)
email = forms.EmailField(
label="邮箱",
error_messages={
"require": "邮箱不能为空"
},
widget=forms.widgets.EmailInput(
attrs={"class": "form-control"}
)
)
以上注册功能已经实现的差不多了，但是在 选择头像 时，选择的头像不会替换默认的图片
改进方法如下（一个新的知识点）：
#给选择图片的input标签绑定事件 <script> //找到头像的input标签，绑定change 事件 $("#id_avatar").on("change",function () { //1.创建一个读文件的对象 var filereader = new FileReader(); //取到当前选中的头像文件 console.log(this.files[0]); //读取你选中的文件 filereader.readAsDataURL(this.files[0]); //读文件是需要事件的（js是异步的） //实现等待功能 filereader.onload = function () { //2.等上一步读完文件之后，把图片加载到img标签里面 $("#avatar_img").attr("src",filereader.result); } }) </script>
以上是关于基于form组件的注册的主要内容，如果未能解决你的问题，请参考以下文章
jdango 项目试炼blog--基于Form组件ajax用户注册