但是!!我们在做项目的时候,不可避免的可能需要用到很多forms组件!之前我们都是写在views.py里面的,但是这样太过冗余,为了接耦合,我们可以新建一个文件夹里面专门放forms组件!!
forms组件部分
from django import forms
from app01 import models
class MyForms2(forms.Form):
username = forms.CharField(min_length=3,max_length=8,label='用户名',
widget=forms.TextInput(attrs={'class':'form-control'}),
error_messages={
'required':'用户名不能为空',
'min_length':'用户名最少3位',
'max_length':'用户名最多8位'
}
)
password = forms.CharField(label='密码',min_length=3,max_length=8,
widget=forms.PasswordInput(attrs={'class':'form-control'}),
error_messages={
'required': '密码不能为空',
'min_length': '密码最少3位',
'max_length': '密码最多8位'
}
)
confirm_password = forms.CharField(label='确认密码',min_length=3,max_length=8,
widget=forms.PasswordInput(attrs={'class': 'form-control'}),
error_messages={
'required': '密码不能为空',
'min_length': '密码最少3位',
'max_length': '密码最多8位'
}
)
email = forms.EmailField(label='邮箱',
widget=forms.EmailInput(attrs={'class': 'form-control'}),
error_messages={
'invalid':'邮箱格式不正确',
'required':'邮箱不能为空',
}
)
def clean_username(self):
username = self.cleaned_data.get('username')
is_exist = models.UserInfo.objects.filter(username=username)
if is_exist:
self.add_error('username','用户名已经存在')
return username
def clean(self):
password = self.cleaned_data.get('password')
confirm_password = self.cleaned_data.get('confirm_password')
if password != confirm_password:
self.add_error('confirm_password','两次密码不一致')
return self.cleaned_data
视图函数部分
from django.shortcuts import render
from app02.myform2 import MyForms2
from django.http import HttpResponse
from app01 import models
def register2(request):
form_obj = MyForms2()
if request.method == 'POST':
form_obj = MyForms2(request.POST)
file = request.FILES.get('file')
if form_obj.is_valid():
form_obj.cleaned_data.pop('confirm_password')
if file:
form_obj.cleaned_data['avatar'] = file
models.UserInfo.objects.create_user(**form_obj.cleaned_data)
return HttpResponse('ok')
return render(request,'register2.html',locals())
html部分
向后端提交数据可以用form表单也可以用ajax提交
法1:form表单提交
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
{# 这里我们采用了form表单向后端提交数据,form默认是提交的urlencoded的编码格式,#}
{# urlencoded的格式form表单只会将普通键值对封装到request.POST中,添加enctype="multipart/form-data",#}
{# 可以获取普通键值对和文件。#}
<form action="" novalidate method="post" enctype="multipart/form-data">
{% csrf_token %}
<h1 class="text-center">注册</h1>
{% for form in form_obj %}
<div class="form-group">
<label for="">{{ form.label }}</label>
{{ form }}
{# 这里是只有当以form表单提交的时候才会展示报错信息,如果以ajax就不该以这样的方式添加报错信息#}
<span style="color: red">{{ form.errors.0 }}</span>
</div>
{% endfor %}
<div>
{# 插入的图片可以指定宽度width,以此来规定图片的大小#}
<label for="myimg">头像<img src="/static/img/default.png" alt="" width="80" id="myimg2" ></label>
{# 添加display:none 来隐藏file文本框#}
<input type="file" name="file" id="myimg" style="display: none">
</div>
<input type="submit" value="提交" class="btn-primary btn form-control">
</form>
</div>
</div>
</div>
</body>
<script>
// change 文本域变化事件,当myimg的文本域变化是触发
// 这一步是将提交的头像动态的展示在前端页面上
$('#myimg').change(function (){
{#引出一个文件阅读器对象#}
{#1.先生成一个文件阅读器对象#}
let fileDataObj = new FileReader();
{#2.获取用户上传的头像#}
let fileobj = $(this)[0].files[0];
{#3.将文件对象交给阅读器对象进行读取#}
fileDataObj.readAsDataURL(fileobj);
{#4.利用文件阅读器将图片展示到前端页面,就是修改img的src属性#}
{#这里需要等文件阅读器加载完毕在执行修改src属性的操作#}
fileDataObj.onload=function (){
$('#myimg2').attr('src',fileDataObj.result) // fileDataObj.result是文件阅读器对象读取完毕文件的结果
}
})
</script>
出处:https://www.cnblogs.com/suncolor/p/16593446.html