作者:Opera2502896761 | 来源:互联网 | 2023-09-11 13:52
目录BBS项目(三)注册forms类编写局部钩子和全局钩子注册功能前端注册功能后端注册功能前端错误渲染注册forms类编写局部钩子和全局钩子forms校验fromdjangoimp
目录
- BBS项目(三)
- 注册forms类编写局部钩子和全局钩子
- 注册功能前端
- 注册功能后端
- 注册功能前端错误渲染
'''forms校验'''
from django import forms
from django.forms import widgets
from blog import models
from django.core.exceptions import ValidationError
'''注册校验,写入样式'''
class RegisterForm(forms.Form):
# 名称校验
username = forms.CharField(
max_length=18, min_length=3,label='用户名',
error_messages={'required': '该字段必填', 'max_length': '名字过长,不能超过18个字符',
'min_length': '名字过短,不能少于三个字符'},
widget=widgets.TextInput(attrs={'class': 'form-control'})
)
# 密码校验
password = forms.CharField(
max_length=18, min_length=3,label='密码',
error_messages={'required': '该字段必填', 'max_length': '密码过长,不能超过18个字符',
'min_length': '密码过短,不能少于三个字符'},
widget=widgets.PasswordInput(attrs={'class': 'form-control'})
)
re_password = forms.CharField(
max_length=18, min_length=3,label='确认密码',
error_messages={'required': '该字段必填', 'max_length': '密码过长,不能超过18个字符',
'min_length': '密码过短,不能少于三个字符'},
widget=widgets.PasswordInput(attrs={'class': 'form-control'})
)
# 邮箱
email = forms.EmailField(
error_messages={'required': '该字段必填', 'invalid': '邮箱格式不正确'},label='邮箱',
widget=widgets.EmailInput(attrs={'class': 'form-control'})
)
# 局部钩子,校验用户是否存在
def clean_username(self):
username = self.cleaned_data.get('username')
# 拿到数据判断用户在不在表中
user = models.UserInfo.objects.filter(username=username).first()
if user:
# 用户存在抛异常
raise ValidationError('该用户以存在')
else:
return username
# 全局钩子,校验密码是否一致
def clean(self):
password = self.cleaned_data.get('password')
re_password = self.cleaned_data.get('re_password')
if not password == re_password:
raise ValidationError('两次密码不一致')
{#注册功能前端功能的设置#}
{## 发送ajax请求,使用的Formdata#}
{##form标签.serializeArray()#}
{##}
{## 整体代码#}
$('#id_submit').click(function () {
let formdata = new FormData()
formdata.append('myfile', $('#myfile')[0].files[0])
//方案一
/*
formdata.append('username',$('#id_username').val())
formdata.append('password',$('#password').val())
formdata.append('re_password',$('#id_re_password').val())
formdata.append('email',$('#id_email').val())
*/
//方案二
{#serializeArray() 将myfile 里面的数据转换成列表的形式#}
let form_data = $('#my_form').serializeArray()
//console.log(form_data)
{#each循环取值#}
$.each(form_data, function (index, element) {
//console.log(index)
//console.log(element)
formdata.append(element.name, element.value)
})
//console.log(formdata.get('username'))
$.ajax({
url: '/register/',
method: 'post',
contentType: false,
processData: false,
data: formdata,
success: function (data) {
console.log(data)
{#跳转到前端页面#}
if (data.status == 100) {
location.href = data.next_url
//location.href='/login/'
} else {
{#each循环#}
$.each(data.msg, function (key, value) {
//console.log('#id_'+key)
if (key == '__all__') {
//全局钩子抛出的错
$('#id_error').html(value[0])
} else {
//取到input标签的下一个
//$('#id_'+key).next().html(value[0])
//链式调用
//$('#id_'+key).parent().addClass('has-error')
//链式调用
//局部错误
//先取到input框 然后取到input框下面的标签在下面的标签上将操作信息写进来 然后找了一个复空签加了has_error
$('#id_' + key).next().html(value[0]).parent().addClass('has-error')
}
})
//加了一个定时器,3s以后干某些事
setTimeout(function () {
//清除红色框
$('.form-group').removeClass('has-error')
//清空所有错误信息
$('.error').html('')
}, 3000)
}
}
})
})
view.py
from django.shortcuts import render,HttpResponse,redirect
from blog import models
# Create your views here.
from blog.blog_forms import RegisterForm
from django import forms
from django.http import JsonResponse
# 数据校验
def register(request):
if request.method=='GET':
register_form=RegisterForm()
return render(request,'register.html',cOntext={'form':register_form})
elif request.method =='POST':
response = {'status': 100, 'msg':None}
register_form = RegisterForm(request.POST)
if register_form.is_valid():
# 数据校验通过
# 可能传头像 可能没有传头像
# models.UserInfo.objects.create_user()
clean_data=register_form.cleaned_data
print(clean_data)
my_file =request.FILES.get('myfile')
if my_file:#上传了头想
#filefiled字段类型直接接受一个文件对象
#它会把文件存到upload_to='avatar'/,然后把路径存到数据库中
# 相当于with open 打开文件,把文件存到avatar路径下 然后把路径赋值给avatar这个字段
clean_data['avatar'] = my_file
clean_data.pop('re_password')
models.UserInfo.objects.create_user(**clean_data)
response['msg'] = '注册成功'
# 注册成功跳转到登录页面
response['next_url'] = '/login/'
else:
response['status'] = 101
response['msg'] = register_form.errors
return JsonResponse(response)
success: function (data) {
console.log(data)
{#跳转到前端页面#}
if (data.status == 100) {
location.href = data.next_url
//location.href='/login/'
} else {
{#each循环#}
$.each(data.msg, function (key, value) {
//console.log('#id_'+key)
if (key == '__all__') {
//全局钩子抛出的错
$('#id_error').html(value[0])
} else {
//取到input标签的下一个
//$('#id_'+key).next().html(value[0])
//链式调用
//$('#id_'+key).parent().addClass('has-error')
//链式调用
//局部错误
//先取到input框 然后取到input框下面的标签在下面的标签上将操作信息写进来 然后找了一个复空签加了has_error
$('#id_' + key).next().html(value[0]).parent().addClass('has-error')
}
})
//加了一个定时器,3s以后干某些事
setTimeout(function () {
//清除红色框
$('.form-group').removeClass('has-error')
//清空所有错误信息
$('.error').html('')
}, 3000)
}
}
})