bbs ?第二天 ??注册功能 ??需要上传图片

from django import formsfrom django.core.exceptions import ValidationError# Django内置的正则from django.core.validators import RegexValidatorfrom blog import modelsclass LoginForm(forms.Form): ???username = forms.CharField( ???????label="用户名", ???????min_length=3, ???????max_length=12, ???????error_messages={ ???????????"required": "用户名不能为空", ???????????"min_length": "用户名最少3位", ???????????"max_length": "用户名最长12位" ???????}, ???????widget=forms.widgets.TextInput( ???????????attrs={"class": "form-control c1"} ???????) ???) ???password = forms.CharField( ???????label="密码", ???????min_length=4, ???????max_length=12, ???????error_messages={ ???????????"required": "密码不能为空", ???????????"min_length": "密码最短4位", ???????????"max_length": "密码最长12位" ???????}, ???????widget=forms.widgets.PasswordInput( ???????????attrs={"class": "form-control"} ???????) ???)# 注册功能的字段的校验class RegForm(forms.Form): ???username = forms.CharField( ???????label="用户名", ???????min_length=3, ???????max_length=12, ???????error_messages={ ???????????"required": "用户名不能为空", ???????????"min_length": "用户名最短3位", ???????????"max_length": "用户名最长12位" ???????}, ???????widget=forms.widgets.TextInput( ???????????attrs={"class": "form-control"} ???????) ???) ???password = forms.CharField( ???????label="密码", ???????min_length=3, ???????max_length=12, ???????error_messages={ ???????????"required": "密码不能为空", ???????????"min_length": "密码最短3位", ???????????"max_length": "密码最长12位" ???????}, ???????widget=forms.widgets.PasswordInput( ???????????attrs={"class": "form-control"} ???????) ???) ???re_password = forms.CharField( ???????label="确认密码", ???????min_length=3, ???????max_length=12, ???????error_messages={ ???????????"required": "密码不能为空", ???????????"min_length": "密码最短3位", ???????????"max_length": "密码最长12位" ???????}, ???????widget=forms.widgets.PasswordInput( ???????????attrs={"class": "form-control"} ???????) ???) ???phone = forms.CharField( ???????label="手机号", ???????min_length=11, ???????max_length=11, ???????validators=[ ???????????RegexValidator(r‘^\d{11}$‘, "手机号必须是数字"), ???????????RegexValidator(r‘^1[356789][0-9]{9}$‘, "手机号码格式不正确") ???????], ???????error_messages={ ????????????????????????"required": "手机不能为空！", ????????????????????????"min_length": "手机号码11位", ????????????????????????"max_length": "手机号码11位" ???????}, ???????widget=forms.widgets.TextInput( ???????????attrs={"class": "form-control"} ???????) ???) ???# 钩子函数 ?clean_data 取到字段里面的所有内容 ???# 局部钩子 ?用于校验一些正常的结果 ?clean_字段名 ???def clean_username(self): ???????# 取里面username字段名的数据 ???????value = self.cleaned_data.get("username", "") ???????if "金瓶" in value: ???????????raise ValidationError("名字非法") ???????elif models.UserInfo.objects.filter(username=value): ???????????raise ValidationError("用户名已存在") ???????else: ???????????return value ???# 全局钩子 ?用于校验密码是否一致 ???def clean(self): ???????pwd = self.cleaned_data.get(‘password‘, ‘‘) ???????re_pwd = self.cleaned_data.get(‘re_password‘, ‘‘) ???????# 如果密码不为空或者一致 ???????if re_pwd and pwd == re_pwd: ???????????return self.cleaned_data ???????else: ???????????err_msg = "两次密码不一致或者为空" ???????????self.add_error("re_password", err_msg) ???????????# raise ValidationError(err_msg)

<div class="container"> ???<div class="row"> ???????<div class="panel panel-primary col-md-8 col-md-offset-2 " id="login-form"> ???????????<div class="panel-heading"> ???????????????<h3 class="panel-title text-center ">注册界面</h3> ???????????</div> ???????????<div class="col-md-4 col-md-offset-4" id="login-form"> ???????????????<form autocomplete="off" novalidate> ???????????????????<div class="form-group"> ???????????????????????<label for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}</label> ???????????????????????{{ form_obj.username }} ???????????????????????<span class="help-block"></span> ???????????????????</div> ???????????????????<div class="form-group"> ???????????????????????<label for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}</label> ???????????????????????{{ form_obj.password }} ???????????????????????<span class="help-block"></span> ???????????????????</div> ???????????????????<div class="form-group"> ???????????????????????<label for="{{ form_obj.re_password.id_for_label }}">{{ form_obj.re_password.label }}</label> ???????????????????????{{ form_obj.re_password }} ???????????????????????<span class="help-block"></span> ???????????????????</div> ???????????????????<div class="form-group"> ???????????????????????<label for="{{ form_obj.phone.id_for_label }}">{{ form_obj.phone.label }}</label> ???????????????????????{{ form_obj.phone }} ???????????????????????<span class="help-block"></span> ???????????????????</div> ???????????????????<div class="form-group"> ???????????????????????<label>头像</label> ???????????????????????<div class="col-ms-10"> ???????????????????????????<input accept="image/*" type="file" id="id_avatar" name="avatar" style="display: none"> ???????????????????????????<label for="id_avatar"><img src="/static/img/default.png" id="show-avatar"></label> ???????????????????????</div> ???????????????????</div> ???????????????????<div class="form-group"> ???????????????????????<button id="reg-button" type="button" class="btn btn-default">注册</button> ???????????????????</div> ???????????????</form> ???????????</div> ???????</div> ???</div></div>

def reg(request): ???if request.method == ‘POST‘: ???????ret = {‘code‘: 0} ???????# 如果是POST请求就拿到所有form表单里面的所有数据 ???????form_obj = forms.RegForm(request.POST) ???????# 校验form里面的正则数据是否通过 ???????if form_obj.is_valid(): ???????????# 把头像对象拿出来 ???????????# 取到前端写好的FormData对象里面的所有数据 ???????????# 取到图片对象 头像 ???????????avatar_obj = request.FILES.get(‘avatar‘) ???????????# 创建用户前需要把重复一次的密码提出来 ???????????form_obj.cleaned_data.get(‘re_password‘, ‘‘) ???????????# 创建用户 ???????????models.UserInfo.objects.create_user( ???????????????# 头像 ???????????????avatar=avatar_obj, ???????????????# 所有用户信息 ???????????????**form_obj.cleaned_data ???????????) ???????????ret[‘data‘] = "/login/" ???????else: ???????????# 没有通过数据校验 ???????????ret[‘code‘] = 1 ???????????# 通过data 发送form_obj里面正则校验报错的信息到前端 ???????????ret[‘data‘] = form_obj.errors ???????return JsonResponse(ret) ???# 如果不是POST请求就发送一个空的form表单对象过去前端 ???form_obj = forms.RegForm() ???return render(request, "reg.html", {‘form_obj‘: form_obj})

<script> ???// 找到注册按钮绑定点击事件 ???$("#reg-button").click(function () { ???????var dataObj = new FormData(); ???????dataObj.append("username", $("#id_username").val()); ???????dataObj.append("password", $("#id_password").val()); ???????dataObj.append("re_password", $("#id_re_password").val()); ???????dataObj.append("phone", $("#id_phone").val()); ???????dataObj.append("avatar", $("#id_avatar")[0].files[0]); ???????$.ajax({ ???????????url: "/reg/", ???????????type: "POST", ???????????processData: false, ???????????contentType: false, ???????????data: dataObj, ???????????success: function (data) { ???????????????console.log(data); ???????????????if (data.code) { ???????????????????// 如果有报错信息，应该在页面的对应位置展示出来 ???????????????????var errMsgObj = data.data; ???????????????????$.each(errMsgObj, function (k, v) { ???????????????????????// k: 字段名 ?v：报错信息的数组 ???????????????????????// 根据字段名找对应的input标签，把错误信息添加到对应位置 ???????????????????????$("#id_" + k).next(".help-block").text(v[0]).parent().parent().addClass("has-error"); ???????????????????}) ???????????????} else { ???????????????????console.log(data.data); ???????????????????location.href = data.data || "/login/" ???????????????} ???????????} ???????}) ???}); ???// 给每一个input标签绑定focus事件，移除当前的错误提示信息 ???$("input.form-control").focus(function () { ???????$(this).next(".help-block").text("").parent().parent().removeClass("has-error"); ???}); ???// 头像预览 ???$("#id_avatar").change(function () { ???????// 找到你选中的那个头像文件 ???????var fileObj = this.files[0]; ???????console.log(fileObj); ???????// 读取文件路径 ???????var fileReader = new FileReader(); ???????fileReader.readAsDataURL(fileObj); ???????// 等图片被读取完毕之后，再做后续操作 ???????fileReader.onload = function () { ???????????// 设置预览图片 ???????????$("#show-avatar").attr("src", fileReader.result); ???????}; ???})</script>