注册功能页面的搭建，
注册功能页面的搭建，
思路分析
注册页面需要对用户提交的数据进行校验，并且需要对用户输入错误的地方进行提示！
所有我们需要使用forms组件搭建注册页面！
平时我们书写form是组件的时候是在views.py里面书写的，
但是为了接耦合，我们需要将forms组件都单独写在一个地方，需要用的时候导入就行！
例如,在项目文件夹下创建一个myforms文件夹，里面放各种forms组件文件：
myforms文件夹
regform.py
loginform.py
userform.py
orderform.py
注册页面的效果图：
注册页面代码实现
1.编写注册页面的forms组件
from django import forms
from app01 import models
class RegisterForms(forms.Form):
username = forms.CharField(label='用户名',max_length=8,min_length=3,error_messages={
'required':'用户名不能为空',
'max_length':'用户名最大8位',
'min_length': '用户名最小8位',
},
widget= forms.widgets.TextInput(attrs={'class':'form-control'}),
)
password = forms.CharField(label='密码',max_length=8,min_length=3,error_messages={
'required':'密码不能为空',
'max_length':'密码最大8位',
'min_length': '密码最小8位',
},
widget= forms.widgets.PasswordInput(attrs={'class':'form-control'}),
)
confirm_password = forms.CharField(label='确认密码', max_length=8, min_length=3, error_messages={
'required': '确认密码不能为空',
'max_length': '确认密码最大8位',
'min_length': '确认密码最小8位',
},
widget=forms.widgets.PasswordInput(attrs={'class': 'form-control'}),
)
email = forms.EmailField(label='邮箱',error_messages={
'required':'邮箱不能为空',
'invalid':'邮箱格式不正确',
},
widget=forms.widgets.EmailInput(attrs={'class':'form-control'})
)
# 钩子函数
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
2.将注册页面的forms组件传入views.py里，然后渲染到前端页面
from app01.myforms import RegisterForms
def register(request):
form_obj = RegisterForms() # 生产一个空的form_obj对象，然后传入前端就可以渲染出html页面
return render(request,'register.html',locals())
3.forms组件在前端渲染的第三种方式
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3 class="text-center">注册</h3>
<form id="myform"> <!--注意这里不用form表单提交数据，用form标签只是为了后面的序列化表单分便取出数据-->
{% csrf_token %}
{% for form in form_obj %}
<div class="form-group">
<label for="{{ form.auto_id }}">{{ form.label }}:</label>
{{ form }}
<span >{{ form.error.0 }}</span>
</div>
{% endfor %}
<div class="form-group">
<label for="myfile">头像: <img src="/static/img/default.png" alt="" width="100px">
</label>
<input type="file" id="myfile" >
</div>
<input type="button" class="btn btn-primary pull-right" value="提交" id="id_commit">
</form>
</div>
</div>
</div>
4.用户头像动态展示：用到的是一个图片阅读器对象
// 用户头像动态展示:给头像文件框绑定一个文本域变化事件，当文本域变化时动态展示图片
$('#myfile').change(function (){
// 1.先生成一个文件阅读器对象，用于读取头像和存储头像
let fileReaderObj = new FileReader();
// 2.获取头像对象
let fileObj = $('#myfile')[0].files[0];
// 3.利用文件阅读器对象读取头像
// 注意：这一步是异步操作，也是IO操作，意味着我还没有读取完毕就往下执行了，所以fileReaderObj.result没有任何结果，因此需要使用预加载，等第3步执行完毕在执行第4步
fileReaderObj.readAsDataURL(fileObj);
// 4.利用文件阅读器对象将头像展示到前端页面 即：修改img标签里的src属性
fileReaderObj.onload = function (){
$('#myimg').attr('src',fileReaderObj.result)
};
})
5.向后端提交用户数据:用到了表单序列化方法取到用户数据和jquery查找方法，得到对应input的id值渲染文本和样式
// 向后端提交用户数据
$('#id_commit').click(function (){
let formData = new FormData();
let formDataObj = $('#myform').serializeArray();
$.each(formDataObj,function (index,obj){
formData.append(obj.name,obj.value)
});
formData.append('file',$('#myfile')[0].files[0]);
$.ajax({
type:'post',
url:'',
data:formData,
contentType:false,
processData:false,
success:function (args){
if (args.code==1000){
window.location.href = args.url
}else{
// 找到对应span标签，渲染上错误信息
// 先来看下错误信息的格式和对应input标签的id
$.each(args.msg,function (index,obj){
// index是对应的字段名，obj是对应的错误信息列表
// 得到目标的input的id值
let targetID = '#id_' + index;
$(targetID).next().text(obj[0]).parent().addClass('has-error')
})
}
}
})
})
6.聚焦事件：当鼠标聚焦到对应input框时，取消对应标签的文本和样式
// 当鼠标聚焦到input框时，取消input的has-error样式和错误提示文本
$('input').focus(function (){
$(this).next().text('').parent().removeClass('has-error')
})
评论关闭