Django - 基於 ajax資料傳輸 + forms元件資料校驗 - 註冊功能頁面
阿新 • • 發佈：2018-11-24
目錄
一、forms元件
from django import forms from django.core.exceptions import ValidationError from app_2 import models class MyForm(forms.Form): name = forms.CharField(max_length=8, min_length=3, label='使用者名稱', widget=forms.widgets.TextInput(attrs={ 'id': 'name', 'class': 'form-control', 'placeholder': "請輸入使用者名稱", 'aria - describedby': "basic-addon1", }), error_messages={'max_length': '超出長度範圍,8', 'min_length': '小於長度範圍,3', 'required': '必填選項', }) pwd = forms.CharField(max_length=8, min_length=3, required=True, label='密碼', widget=forms.widgets.PasswordInput(attrs={ 'id': 'pwd', 'class': 'form-control', 'placeholder': "請輸入密碼", 'aria - describedby': "basic-addon1", }), error_messages={'max_length': '超出長度範圍,8', 'min_length': '小於長度範圍,3', 'required': '必填選項', } ) re_pwd = forms.CharField(max_length=8, min_length=3, required=True, label='確認密碼', widget=forms.widgets.PasswordInput(attrs={ 'id': 're_pwd', 'class': 'form-control', 'placeholder': "請重新輸入密碼", 'aria - describedby': "basic-addon1", }), error_messages={'max_length': '超出長度範圍,8', 'min_length': '小於長度範圍,3', 'required': '必填選項', } ) email = forms.EmailField(label='郵箱', widget=forms.widgets.EmailInput(attrs={ 'id': 'email', 'class': 'form-control', 'placeholder': "Recipient's username", 'aria - describedby': "basic-addon1", }), error_messages={'required': '必填選項', 'invalid': '非法格式'} ) # 使用者名稱校驗，與資料庫相關，檢測使用者名稱是否存在 def clean_name(self): name = self.cleaned_data.get('name') valid = models.User.objects.filter(name=name).first() if valid: raise ValidationError('使用者名稱已經存在') return name # 校驗提交的兩次密碼是否相同 def clean(self): pwd = self.cleaned_data.get('pwd') re_pwd = self.cleaned_data.get('re_pwd') if pwd == re_pwd: return self.cleaned_data else: raise ValidationError('兩次密碼不一致')
二、檢視函式
總結：
- 判斷請求的兩種方式
- if request.ajax(): #如果ajax請求
- if request,method=="POST": #如果是POST請求
from django.shortcuts import render, HttpResponse from django.http import JsonResponse def view_form(request): if request.method == 'GET': myform = MyForm() return render(request, 'forms.html', locals()) regresponse = {'name': None, 'error': None} myform = MyForm(request.POST) if myform.is_valid(): name = myform.cleaned_data.get('name') regresponse['name'] = name myform.cleaned_data.pop('re_pwd') models.User.objects.create(**myform.cleaned_data) else: print(myform.errors) regresponse['error'] = myform.errors return JsonResponse(regresponse) # return render(request, 'forms.html', locals())
三、前端頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.3.1.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <style> .line { padding-top: 10px; } </style> <body> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form action="" method="post"> <div class="input-group line"> <span class="input-group-addon" id="sizing-addon1">ueser</span> <div>{{ myform.name }}</div> </div> <div class="input-group line"> <span class="input-group-addon" id="basic-addon1">pwd</span> <div>{{ myform.pwd }}</div> </div> <div class="input-group line"> <span class="input-group-addon" id="basic-addon1">re_pwd</span> <div>{{ myform.re_pwd }}</div> </div> <div class="input-group line"> <span class="input-group-addon" id="basic-addon1">email</span> <div>{{ myform.email }}</div> </div> </form> <button id="btn" style="margin-top: 10px;float:right">ajax提交</button> <span class="msg"></span> </div> </div> <script> $('#btn').click(function () { var formdata = new FormData(); formdata.append('name', $("#name").val()); formdata.append('pwd', $("#pwd").val()); formdata.append('re_pwd', $("#re_pwd").val()); formdata.append('email', $("#email").val()); $(".error_right").html(""); $(".error_right").parent().removeClass("has-error"); {#前臺傳輸formdata格式資料#} $.ajax({ url: 'app_2/forms/', type: 'post', data: formdata, contentType: false, processData: false, success: function (data) { console.log(data); console.log(typeof data); {#var dic = JSON.parse(data);#} if (data['name']) { $('.msg').html('註冊成功！') } else { console.log(data['error']); var msg = data['error']; $.each(msg, function (k, v) { $span = $('<span>'); $span.addClass('error_right').css("color", 'red'); $span.html(v[0]); $('#' + k).after($span).parent().addClass('has-error'); if (k == '__all__') { ("#" + k).after($span); } }); } } }) }); $("input").blur(function () { console.log('onblur'); var formdata = new FormData(); formdata.append('name', $("#name").val()); formdata.append('pwd', $("#pwd").val()); formdata.append('re_pwd', $("#re_pwd").val()); formdata.append('email', $("#email").val()); $(".error_right").html(""); $(".error_right").parent().removeClass("has-error"); $.ajax({ url: 'app_2/forms/', type: 'post', data: formdata, contentType: false, processData: false, success: function (data) { console.log(data); var msg = data['error']; $.each(msg, function (k, v) { $span = $('<span>'); $span.addClass('error_right').css("color", 'red'); $span.html(v[0]); $('#' + k).after($span).parent().addClass('has-error'); if (k == '__all__') { ("#" + k).after($span); } }) } }) }); </script> </body> </html>3-1 JQuery相關操作
- attr： 一個引數是獲取屬性的值，兩個引數是設定屬性值
- removeAttr(屬性名)： 刪除屬性值
- prop： 適應於屬性的返回值是布林型別的（單選，反選，取消的例子）
- removePorp: 刪除屬性的值
- 迴圈的兩種方式：
- $.each(陣列/物件,function(i,v){})
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
- $("div").each(function(i,v){})
$("img").each(function(){ $(this).toggleClass("example"); });
- 為html結構增添內容
$span = $('<span>'); # 建立一個span物件 $span.addClass('error_right').css("color", 'red');# 為span物件增添Class和css屬性 $span.html(v[0]);# 為span物件新增內容- css中的三種隱藏
- 1、display:none 隱藏所有內容
- 2、visibility:hidden 隱藏內容
- 3、overflow:hidden 隱藏溢位內容
區別 visibility雖然隱藏了，但是被隱藏的內容依然佔據這空間，這段隱藏了的內容卻保留空間的位置會在網頁中顯示空白 而display:隱藏了不佔用空間 我們在註冊的時候不用display：none，不然選擇檔案的那個功能就沒有了，我們可以吧透明度
四、資料庫相關
from django.db import models # Create your models here. class User(models.Model): # id欄位，自增int id = models.AutoField(primary_key=True) name = models.CharField(max_length=32) pwd = models.CharField(max_length=32) email = models.EmailField()