基於ModelForm檢驗註冊資訊
阿新 • • 發佈：2018-11-06
一、在app01下建立form.py
程式碼裡參照的表為Django自帶的auth_user表
1 from django import forms 2 import re 3 from django.contrib.auth.models import User 4 from django.core.exceptions import ValidationError 5 from django.forms import widgets as wid 6 class UserModelForm(forms.ModelForm): 7 class Meta: 8 #參照表 9 model=User 10 #顯示錶裡的所有欄位 11 fields='__all__' 12 #選取表裡顯示的欄位 13 fields=['username','password','email'] 14 #排除不顯示的欄位 15 exclude=['title'] 16 labels={ 17 'username':'使用者名稱', 18 'password':'密碼', 19 'email':'郵箱' 20 } 21 #設定提示資訊 22 error_messages={ 23 'username':{'required':'使用者名稱不能為空'}, 24 'password':{'required':'密碼不能為空'}, 25 'email':{'required':'郵箱不能為空'}, 26 'rpassword':{'required':'確認密碼不能為空'} 27 } 28 widgets={29 'pub_data':wid.TextIput(attrs={'type':'data'}) 30 } 31 #可以設定表裡沒有的欄位 32 rpassword = forms.CharField(min_length=5, 33 label='確認密碼', 34 error_messages={'required':'確認密碼不能為空'} 35 ) 36 def clean_username(self): 37 val = self.cleaned_data.get('username') 38 ret = User.objects.filter(username=val).first() 39 if ret: 40 raise ValidationError('使用者名稱已存在') 41 else: 42 return val 43 44 def clean_email(self): 45 val = self.cleaned_data.get('email') 46 if re.search('\[email protected]$', val): 47 return val 48 else: 49 raise ValidationError('郵箱必須是136格式') 50 def clean(self): 51 password=self.cleaned_data.get('password') 52 rpassword=self.cleaned_data.get('rpassword') 53 if password and rpassword: 54 if password == rpassword: 55 return self.cleaned_data 56 else: 57 raise ValidationError('兩次密碼不一致') 58 else: 59 return self.cleaned_data 60 def __init__(self,*args,**kwargs): 61 super().__init__(*args,**kwargs) 62 for filed in self.fields.values(): 63 #可以設定統一的屬性 64 # filed.error_messages={'required':'該使用者資訊不能為空'} 65 filed.widget.attrs.update({"class":'form-control'})
二、views 檢視函式
def regist(request): res={'error':'','user':None} if request.method=="GET": form=UserModelForm() return render(request,'regist.html',{'form':form}) else: form=UserModelForm(request.POST) if form.is_valid(): obj=form.save() #create 儲存資訊 res['user']='ok' else: error=form.errors res['error']=error return JsonResponse(res)
三、HTML頁面 表單通過form類渲染
使用Ajax傳送資料，根據返回資訊將錯誤提示顯示到對應的表單下
1 <body> 2 <div class="container"> 3 <div class="row c1"> 4 <div class="col-md-8 col-md-offset-2"> 5 {% csrf_token %} 6 <form action="" method="post" novalidate> 7 {% for field in form %} 8 <div> 9 <label for="">{{ field.label }}</label> 10 {{ field }} <span class="error"></span> 11 {% endfor %} 12 </div> 13 <input type="button" class="btn btn-warning" value="註冊"> 14 </form> 15 </div> 16 </div> 17 </div> 18 19 <script> 20 $(function () { 21 $('.btn').click(function () { 22 $.ajax({ 23 url:'', 24 type:'post', 25 data:{ 26 username:$('#id_username').val(), 27 password:$('#id_password').val(), 28 rpassword:$('#id_rpassword').val(), 29 email:$('#id_email').val(), 30 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() 31 }, 32 success:function (res) { 33 if(res.user){ 34 location.href='/login/' 35 } 36 else{ 37 //清除錯誤 38 $('.error').html(''); 39 $('.form-control').removeClass('has-error'); 40 41 //顯示新錯誤 42 $.each(res.error,function (i,j) { 43 if(i=='__all__'){ 44 $('#id_rpassword').next().html(j[0]) 45 } 46 $('#id_'+i).next().html(j[0]).css('color','red').parent().addClass('has-error') 47 }); 48 } 49 50 console.log(res) 51 } 52 }) 53 }) 54 }) 55 </script> 56 </body>