Forms結合ajax
Forms的驗證流程:
- 定義用戶輸入規則的類,字段的值必須等於html中name屬性的值(pwd= forms.CharField(required=True)=<input type="password" name="pwd"/>,也就是說pwd=pwd)
- 把用戶提交的數據交給規則的類處理
- 規則的類會判斷用戶輸入的內容是否符合定義的規則
- 如果正確就把用戶輸入的內容以字典的形式存儲,否則把報錯信息以字典的形式存儲
簡單的Django-Form表單驗證
定義urls.py
from django.conf.urls import url from django.contrib import admin from cmdb import views urlpatterns = [ url(r'^login/', views.login), ]
定義views.py
from django.shortcuts import render from django.shortcuts import HttpResponse import json from django import forms #定義用戶輸入的規則 class LoginForm(forms.Form): user = forms.CharField(required=True) #定義login.html中input標簽中name=user的標簽規則 pwd = forms.CharField(required=True) #定義login.html中input標簽中name=pwd的標簽規則 def login(request): if request.method == 'POST': obj = LoginForm(request.POST) #把login.html中用戶輸入的內容封裝到LoginForm類交給它處理 ret = obj.is_valid() #如果提交的數據符合LoginForm中的規則,則返回True,否則返回False if ret: print(obj.clean()) #如果符合規則以字典的形式打印出用戶提交的數據 else: print(obj.errors) #如果不符合規則以字典的形式打印出錯誤 return render(request,'login.html')
定義login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div> <input type="text" name="user"/> </div> <div> <input type="password" name="pwd"/> </div> <input type="button" value="提交" onclick="DoSubmit();"/> </div> <script src="/static/jquery-1.12.4.js"></script> <script> var input_dict = {}; function DoSubmit() { $("input").each(function () { #相當於for循環所有input標簽 var v = $(this).val(); #獲取循環到當前input標簽的內容 var n = $(this).attr('name'); #獲取循環到當前input標簽的屬性值,name=user,user就是屬性值,name=pwd,pwd就是屬性值 input_dict[n] = v; #生成字典:{'屬性值':'標簽輸入的內容'},{'pwd':111} }); console.log(input_dict); $.ajax({ url:'/login/', type:'POST', data:input_dict, success:function (data) { console.log(data); }, error:function () { } }) } </script> </body> </html>
ModelForm結合ajax
需求:
修改個人信息,如果有字段沒填寫就報錯,如果字段填寫沒問題就保存到數據庫
urls.py
url(r'^info/$',views.UserInfoView.as_view(),name='user_info'),
models.py
class UserProfile(AbstractUser): nick_name = models.CharField(max_length=50,verbose_name='昵稱',default='') birday = models.DateField(null=True,blank=True,verbose_name='生日') choice_gender = ( ("male","男"), ("female","女"), ) gender = models.CharField(choices=choice_gender,default='female',max_length=6,verbose_name='性別') address = models.CharField(max_length=100,default='',verbose_name='地址') mobile = models.CharField(max_length=11,null=True,blank=True,verbose_name='手機號') image = models.ImageField(upload_to='image/%Y/%m',default='image/default.png',max_length=100) class Meta: verbose_name = "用戶信息" verbose_name_plural = "用戶信息" def __str__(self): return self.username
forms.py
from users.models import * class UserInfoForm(forms.ModelForm): class Meta: model = UserProfile fields = ['nick_name','birday','gender','address','mobile']
views.py
class UserInfoView(LoginRequiredMixin,View): def get(self,request): return render(request,'usercenter-info.html',{}) def post(self,request): res = dict() userinfo = UserInfoForm(request.POST,instance=request.user) if userinfo.is_valid(): userinfo.save() res['status'] = 'success' else: res = userinfo.errors print(json.dumps(res)) # 假如address字段信息未填寫,報錯信息是這樣的: "address": ["這個字段是必填項"]} return HttpResponse(json.dumps(res),content_type='application/json')
userinfo.html
<form class="perinform" id="jsEditUserForm" autocomplete="off"> <ul class="right"> <li>昵 稱： <input type="text" name="nick_name" id="nick_name" value="{{ request.user.nick_name }}" maxlength="10"> <i class="error-tips"></i> </li> <li>生 日： <input type="text" id="birth_day" name="birday" value="{{ request.user.birday }}" readonly="readonly"/> <i class="error-tips"></i> </li> <li>性 別： <label> <input type="radio" name="gender" value="male" {% ifequal request.user.gender 'male' %}checked{% endifequal %} >男</label> <label> <input type="radio" name="gender" value="female" {% ifequal request.user.geder 'female' %}checked{% endifequal %}>女</label> </li> <li class="p_infor_city">地 址： <input type="text" name="address" id="address" placeholder="請輸入你的地址" value="{{ request.user.address }}" maxlength="10"> <i class="error-tips"></i> </li> <li>手 機 號： <input type="text" name="mobile" id="mobile" placeholder="請輸入你的手機號碼" value="{{ request.user.mobile|default_if_none:'' }}" maxlength="10"> </li> <li>郵 箱： <input class="borderno" type="text" name="email" readonly="readonly" value="{{ request.user.email }}"/> <span class="green changeemai_btn">[修改]</span> </li> <li class="button heibtn"> <input type="button" id="jsEditUserBtn" value="保存"> </li> </ul> {% csrf_token %} </form> $('#jsEditUserBtn').on('click', function(){ var _self = $(this), $jsEditUserForm = $('#jsEditUserForm') verify = verifySubmit( [ {id: '#nick_name', tips: Dml.Msg.epNickName, require: true} ] ); if(!verify){ return; } $.ajax({ cache: false, type: 'post', dataType:'json', url:"/users/info/", data:$jsEditUserForm.serialize(), #把form表單填寫的內容序列化成json async: true, beforeSend:function(XMLHttpRequest){ _self.val("保存中..."); _self.attr('disabled',true); }, success: function(data) { if(data.nick_name){ _showValidateError($('#nick_name'), data.nick_name); #假如nick_name字段未填寫報錯是這樣的:{"nick_name":{"這個字段是必填項"}},所以如果nick_name字段有報錯就能獲取到報錯信息然后展示,birth_dat字段也同理, }else if(data.birday){ _showValidateError($('#birth_day'), data.birday); }else if(data.address){ _showValidateError($('#address'), data.address); }else if(data.status == "failure"){ Dml.fun.showTipsDialog({ title: '保存失敗', h2: data.msg }); }else if(data.status == "success"){ Dml.fun.showTipsDialog({ title: '保存成功', h2: '個人信息修改成功！' }); setTimeout(function(){window.location.href = window.location.href;},1500); } }, complete: function(XMLHttpRequest){ _self.val("保存"); _self.removeAttr("disabled"); } }); });
效果
