博客系统注册来看form表单使用

 1 class UserInfo(AbstractUser):
 2     """
 3     用户信息
 4     """
 5     nid = models.AutoField(primary_key=True)
 6     nickname = models.CharField(verbose_name=‘昵称‘, max_length=32)
 7     telephone = models.CharField(max_length=11, null=True, unique=True)
 8     avatar = models.FileField(upload_to=‘avatar/‘,default="/avatar/default.png")
 9     create_time = models.DateTimeField(verbose_name=‘创建时间‘, auto_now_add=True)
10     blog = models.OneToOneField(to=‘Blog‘, to_field=‘nid‘,null=True)
11 
12     def __str__(self):
13         return self.username

 1 from django import forms
 2 from django.forms import widgets
 3 
 4 from . models import UserInfo
 5 from django.core.exceptions import NON_FIELD_ERRORS,ValidationError  #  手动触发错误
 6 
 7 
 8 
 9 class RegForm(forms.Form): # 子类
10     # widget 默认情况下，CharField 具有一个TextInput 在HTML 中生成一个<input type="text">
11     # attrs 可以对input标签添加属性
12     def __init__(self,request,*args,**kwargs): # 派生方法
13         super().__init__(*args,**kwargs)
14         self.request = request # 派生属性
15     user = forms.CharField(min_length=5,max_length=12,required=True,  # 规则
16                            error_messages={‘min_length‘:‘最小长度5‘,‘max_length‘:‘最大长度12‘,‘required‘:‘不能为空‘}, # 错误信息
17                            widget = widgets.TextInput(attrs={‘class‘:‘form-control‘,‘placeholder‘:‘username‘})) # 生成标签，标签属性
18 
19     pwd = forms.CharField(required=True,error_messages={‘required‘:‘不能为空‘},widget = widgets.PasswordInput(attrs={‘class‘:‘form-control‘,‘placeholder‘:‘password‘}))
20 
21     repeat_pwd = forms.CharField(required=True,error_messages={‘required‘:‘不能为空‘},widget = widgets.PasswordInput(attrs={‘class‘:‘form-control‘,‘placeholder‘:‘repeat_password‘}))
22 
23     email = forms.EmailField(required=True,error_messages={‘invalid‘:‘格式错误‘,‘required‘:‘不能为空‘},
24                              # 生成一个EmailInput <input type="input">
25                              widget = widgets.EmailInput(attrs={‘class‘:‘form-control‘,‘placeholder‘:‘email‘,‘required‘:‘不能为空‘}))
26 
27     valid_code = forms.CharField(required=True,error_messages={‘required‘:‘不能为空‘},widget = widgets.TextInput(attrs={‘class‘:‘form-control‘,‘placeholder‘:‘valid_code‘}))
28 
29     # 局部钩子，针对user的验证
30     def clean_user(self):
31         user = UserInfo.objects.filter(username=self.cleaned_data.get(‘user‘))
32         if not user:
33             return self.cleaned_data.get(‘user‘)
34         else:
35             raise ValidationError(‘用户名已经存在‘)
36 
37     # 局部钩子，针对pwd的验证
38     def clean_pwd(self):
39         pwd = self.cleaned_data.get(‘pwd‘)
40         if pwd.isdigit() or pwd.isalpha():
41             raise ValidationError(‘不能是纯数字或者纯字母‘)
42         else:
43             return pwd
44 
45     # 局部钩子，针对验证码的验证
46     def clean_valid_code(self):
47         val = self.cleaned_data.get(‘valid_code‘)
48         if val.upper() == self.request.session.get(‘valid_code_str‘).upper():
49             return val
50         else:
51             raise ValidationError(‘验证码错误‘)
52 
53     # 全局钩子，针对全局上的验证，注意，先走局部后走全局
54     def clean(self):
55         if self.cleaned_data.get(‘pwd‘):
56             if self.cleaned_data.get(‘pwd‘) == self.cleaned_data.get(‘repeat_pwd‘):
57                 return self.cleaned_data
58             else:
59                 raise ValidationError(‘俩次密码不一致‘)
60 
61     # 正确信息保存在，clean.data
62     # 错误信息保存在，clean.error

1 urlpatterns = [
2     url(r‘^admin/‘, admin.site.urls),
3     url(r‘^login/‘, views.login_in),
4     url(r‘^register/‘, views.register),
5 ]

 1 from .forms import *
 2 def register(request):
 3     if request.is_ajax():
 4         # 通过from表单验证
 5         print(request.POST)
 6         regForm = RegForm(request,request.POST)
 7         regResponse = {‘user‘:None,‘errors‘:None}
 8         if regForm.is_valid():
 9             # 通过验证，可以注册
10             data = regForm.cleaned_data  # 合法的表单数据，是以字典形式保存
11             user = data.get(‘user‘)
12             pwd = data.get(‘pwd‘)
13             email = data.get(‘email‘)
14             avatar_img = request.FILES.get(‘valid_img‘) #获取的文件对象
15             print(avatar_img)
16             print(type(avatar_img))
17             # user_obj = UserInfo.objects.filter(nid=2).update(avatar=avatar_img)
18             user_obj = UserInfo.objects.create_user(username=user,password=pwd,email=email,avatar=avatar_img)
19             regResponse[‘user‘] = user_obj.username
20         else:
21             regResponse[‘errors‘] = regForm.errors   # regForm.errors 保存所有错误信息，包括__all__全局钩子错误
22         return JsonResponse(regResponse)
23 
24     regForm = RegForm(request) # 前端渲染，虽然没有数据，但是会渲染出标签来
25     return render(request,‘register.html‘,{‘regForm‘:regForm})

 1 <div class="container">
 2     <div class="row">
 3         <div class="col-md-6 col-md-offset-3">
 4             <form>
 5                 {% csrf_token %}
 6                 <div class="form-group">
 7                     <label for="user">用户名：</label>
 8 {#                    <input type="text" class="form-control" id="user" placeholder="User">#}
 9                     {{ regForm.user }} <span></span>
10                 </div>
11 
12                 <div class="form-group">
13                     <label for="pwd">密码：</label>
14 {#                    <input type="password" class="form-control" id="pwd" placeholder="Password">#}
15                     {{ regForm.pwd }} <span></span>
16                 </div>
17 
18                 <div class="form-group">
19                     <label for="repeat_pwd">确认密码：</label>
20 {#                    <input type="password" class="form-control" id="repeat_pwd" placeholder="Repeat Password">#}
21                     {{ regForm.repeat_pwd }} <span></span>
22                 </div>
23 
24                 <div class="form-group">
25                     <label for="email">邮箱：</label>
26 {#                    <input type="email" class="form-control" id="email" placeholder="Email">#}
27                     {{ regForm.email }} <span></span>
28                 </div>
29                 <div class="row">
30                     <div class="col-md-6">
31                         <input type="button" value="confirm register" class="btn btn-primary regBtn">
32                     </div>
33                 </div>
34 
35             </form>
36 
37         </div>
38     </div>
39 </div>
40 
41 <script>
42  {#    AJAX提交注册表单，注册用户 #}
43     $(".regBtn").click(function () {
44 
45         var $formData = new FormData();
46 
47         $formData.append(‘user‘,$(‘#id_user‘).val());
48         $formData.append(‘pwd‘,$(‘#id_pwd‘).val());
49         $formData.append(‘repeat_pwd‘,$(‘#id_repeat_pwd‘).val());
50         $formData.append(‘email‘,$(‘#id_email‘).val());
51         $formData.append(‘valid_code‘,$(‘#id_valid_code‘).val());
52         var file = $(‘#avatar_file‘)[0].files[0];
53         $formData.append(‘valid_img‘,file);
54         $formData.append(‘csrfmiddlewaretoken‘,$("[name=‘csrfmiddlewaretoken‘]").val());
55 
56         $.ajax({
57             url: "/register/",
58             type: "POST",
59             data: $formData,
60             processData:false,   // 不做转码或预处理
61             contentType:false,   // 文件类型不做处理
62             success: function (data) {
63                 if (data.user) {
64                     location.href = ‘/login/‘
65                 }
66                 else {
67                     $(‘span‘).html(‘‘);
68                     $(".form-group").removeClass("has-error");
69                     console.log(data.errors);
70 
71                     $.each(data.errors,function (i,j) {
72                         $("#id_" + i).next().addClass(‘pull-right‘).css(‘color‘, ‘red‘).html(j[0]).parent().addClass(‘has-error‘);
73                         if(i == "__all__") {
74                             $("#id_repeat_pwd").next().addClass("pull-right").css("color", "red").html(j[0]).parent().addClass("has-error");
75                             $("#id_pwd").parent().addClass("has-error");
76                         }
77                     })
78                 }
79             }
80         })
81     })
82 </script>