博客系統註冊來看form表單使用
阿新 • • 發佈：2017-12-31
tro bstr min 信息 信息保存 use upper href creat
創建django app01項目
models結構如下
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
forms
1 from django import forms 2 from django.forms importwidgets 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. urls
1 urlpatterns = [ 2 url(r‘^admin/‘, admin.site.urls), 3 url(r‘^login/‘, views.login_in), 4 url(r‘^register/‘, views.register), 5 ]
2. views
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})
3. reg.html
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>
博客系統註冊來看form表單使用