django form 表單實現前端認證以及顯示錯誤資訊
阿新 • • 發佈：2020-06-28
大致是這樣的流程。程式碼實現
前端部分，沒什麼樣式。只是單純為了實現註冊驗證
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bs/css/bootstrap.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-4"> <h1>註冊</h1> <form method="post"> {% csrf_token %} {% for field in from_obj %} <div class="form-group"> <label for="id_{{ field.name }}">{{ field.label }}</label> {{ field }} <span class="error pull-right" style="color: red"></span> </div> {% endfor %} <br></form> <input type="button" value="提交" class="btn btn-default" id="send_ajax"> </div> </div> </div> <script src="/static/js/jQuery-3.4.1.js"></script> <script> $('.btn').click(function () { $.ajax({ url: '', type: 'post', data: { 'username': $('#id_username').val(), 'pwd': $('#id_pwd').val(), 'r_pwd': $('#id_r_pwd').val(), 'email': $('#id_email').val(), 'tel': $('#id_tel').val(), 'csrfmiddlewaretoken': '{{ csrf_token }}' }, success: function (data) { if (data.user) { console.log(222); location.href='/index/' } else { $.each(data.msg, function (errorms,errorm_list) { $('span').html(''); if(errorms=='__all__'){ $('#id_r_pwd+span').text(errorm_list[0]).parent().addClass('has-error') } $('#id_'+errorms).next().html(errorm_list[0]) }) } } } ) }) </script> </body> </html>
views
from django.shortcuts import render from django.http import JsonResponse from t_from.dt_from import dt_froms from t_from import models # Create your views here. def dt_from(request): from_obj = dt_froms.my_from() if request.is_ajax(): from_obj = dt_froms.my_from(request.POST) response = {'user': None, 'msg': None} # 通過校驗 if from_obj.is_valid(): response['user'] = from_obj.cleaned_data.get('username') models.User.objects.create( username=from_obj.cleaned_data.get('username'), password=from_obj.cleaned_data.get('pwd'), email=from_obj.cleaned_data.get('email'), tel=from_obj.cleaned_data.get('tel'), ) else: response['msg'] = from_obj.errors return JsonResponse(response) return render(request,'registered.html',locals())
form元件
from django import forms from django.forms import widgets from django.core.exceptions import ValidationError import re from t_from import models as dt_models css_style_01 = widgets.TextInput(attrs={'class':"form-control"}) css_style_02 = widgets.PasswordInput(attrs={'class':"form-control"}) # 建立from元件 class my_from(forms.Form): username = forms.CharField(min_length=6, label='賬號', widget=css_style_01) pwd = forms.CharField(min_length=6, label='密碼', widget=css_style_02, error_messages={'required': '密碼不能為空.', 'invalid': '密碼必須包含數字，字母、特殊字元', 'min_length': '密碼長度不能小於6個字元', 'max_length': '密碼長度不能大於32個字元', } ) r_pwd = forms.CharField(min_length=6, label='確認密碼', widget=css_style_02, error_messages={'required': '密碼不能為空.', 'invalid': '密碼必須包含數字，字母、特殊字元', 'min_length': '密碼長度不能小於6個字元', 'max_length': '密碼長度不能大於32個字元', } ) email = forms.EmailField(label='郵箱', widget=css_style_01, error_messages={ 'required': '郵箱不能為空', 'invalid': '郵箱格式錯誤', } ) tel = forms.IntegerField(label='電話號碼', widget=css_style_01, error_messages={ 'required': '電話不能為空', 'invalid': '電話格式不正確', } ) # 區域性鉤子 def clean_username(self): val = self.cleaned_data.get("username") if re.fullmatch(r'^\d+$', val): raise ValidationError('使用者名稱字不能是純數字') elif dt_models.User.objects.filter(username=val): raise ValidationError('該使用者已經存在') else: return val # 全域性鉤子 def clean(self): if self.cleaned_data.get("pwd") == self.cleaned_data.get("r_pwd"): return self.cleaned_data else: raise ValidationError('兩次密碼不一致！')
models
from django.db import models # Create your models here. class User(models.Model): username = models.CharField(max_length=32) password = models.CharField(max_length=32) email = models.EmailField(max_length=32) tel = models.IntegerField()