2. 程式人生 > 程式設計 >Django之form元件自動校驗資料實現

Django之form元件自動校驗資料實現

阿新 • • 發佈：2020-01-14

一、form介紹

我們之前在HTML頁面中利用form表單向後端提交資料時，都會寫一些獲取使用者輸入的標籤並且用form標籤把它們包起來。

與此同時我們在好多場景下都需要對使用者的輸入做校驗，比如校驗使用者是否輸入，輸入的長度和格式等正不正確。如果使用者輸入的內容有錯誤就需要在頁面上相應的位置顯示對應的錯誤資訊.。

Django form元件就實現了上面所述的功能。

總結一下，其實form元件的主要功能如下:

  • 生成頁面可用的HTML標籤
  • 對使用者提交的資料進行校驗
  • 保留上次輸入內容

二、普通方式手寫註冊功能

views.py

# 註冊
def register(request):
  error_msg = ""
  if request.method == "POST":
    username = request.POST.get("name")
    pwd = request.POST.get("pwd")
    # 對註冊資訊做校驗
    if len(username) < 6:
      # 使用者長度小於6位
      error_msg = "使用者名稱長度不能小於6位"
    else:
      # 將使用者名稱和密碼存到資料庫
      return HttpResponse("註冊成功")
  return render(request,"register.html",{"error_msg": error_msg})

register.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>註冊頁面</title>
</head>
<body>
<form action="/reg/" method="post">
  {% csrf_token %}
  <p>
    使用者名稱:
    <input type="text" name="name">
  </p>
  <p>
    密碼：
    <input type="password" name="pwd">
  </p>
  <p>
    <input type="submit" value="註冊">
    <p style="color: red">{{ error_msg }}</p>
  </p>
</form>
</body>
</html>

三、使用form元件實現註冊功能

views.py

先定義好一個RegForm類：

from django import forms

# 按照Django form元件的要求自己寫一個類
class RegForm(forms.Form):
  name = forms.CharField(label="使用者名稱")
  pwd = forms.CharField(label="密碼")

再寫一個檢視函式：

# 使用form元件實現註冊方式
def register2(request):
  form_obj = RegForm()
  if request.method == "POST":
    # 例項化form物件的時候，把post提交過來的資料直接傳進去
    form_obj = RegForm(request.POST)
    # 呼叫form_obj校驗資料的方法
    if form_obj.is_valid():
      return HttpResponse("註冊成功")
  return render(request,"register2.html",{"form_obj": form_obj})

register2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>註冊2</title>
</head>
<body>
  <form action="/reg2/" method="post" novalidate autocomplete="off">
    {% csrf_token %}
    <div>
      <label for="{{ form_obj.name.id_for_label }}">{{ form_obj.name.label }}</label>
      {{ form_obj.name }} {{ form_obj.name.errors.0 }}
    </div>
    <div>
      <label for="{{ form_obj.pwd.id_for_label }}">{{ form_obj.pwd.label }}</label>
      {{ form_obj.pwd }} {{ form_obj.pwd.errors.0 }}
    </div>
    <div>
      <input type="submit" class="btn btn-success" value="註冊">
    </div>
  </form>
</body>
</html>

看網頁效果發現 也驗證了form的功能：

  • 前端頁面是form類的物件生成的 -->生成HTML標籤功能
  • 當用戶名和密碼輸入為空或輸錯之後 頁面都會提示 -->使用者提交校驗功能
  • 當用戶輸錯之後 再次輸入 上次的內容還保留在input框 -->保留上次輸入內容

四、pycharm的專屬測試環境

1.使用方法

1.匯入要測試的py檔案

2.生成一個物件

2.本地校驗測試的一些引數

from_obj.is_valid()     //判斷校驗是否通過
from_obj.cleaned_data    //拿到當前符號校驗的資料{'username': '111','password': '111'}
form_obj.errors       //拿到當前校驗不通過的資料

少傳引數Flalse,多傳Trun。因為少傳了拿不到校驗的資料，多傳了也不會使用。這是字典的形式

五、html自動生成input使用者輸入框的三種方式

forms元件只幫你渲染獲取使用者輸入(輸入 選擇 下拉 檔案)的標籤 不渲染按鈕和form表單標籤

渲染出來的每一個input提示資訊都是類中欄位首字母大寫

class MyRegForm(forms.Form):
  username = forms.CharField(max_length=8,min_length=3) # 最長8位，最短3位
  password = forms.CharField(max_length=8,min_length=3) # 最長8位，最短3位
  email = forms.EmailField() # 郵箱驗證
  
def reg(request):
  # 1 先生成一個空的類物件
  form_obj = MyRegForm()
  if request.method == 'POST':
    # 3 獲取使用者資料並交給forms元件校驗 request.POST
    form_obj = MyRegForm(request.POST)
    # 4 獲取校驗結果
    if form_obj.is_valid():
      return HttpResponse('資料沒問題')
    else:
      # 5 獲取校驗失敗的欄位和提示資訊
      print(form_obj.errors)
  # 2 直接將該物件傳給前端頁面
  return render(request,'reg.html',locals())

第一種方式 {{ form_obj.as_p }} （不推薦）

不推薦，封裝程度高，擴充套件性低。一般測試本地用

<body>
<p>第一種渲染方式:多個p標籤 本地測試方便 封裝程度太高了 不便於擴充套件</p>
{{ form_obj.as_p }}
{#{{ form_obj.as_ul }}#}
{#{{ form_obj.as_table }}#}
</body>

第二種方式 {{ form_obj.username }} （不推薦）

不推薦，擴充套件性較高 ，書寫較為繁瑣，每一個input框都需要自己手動寫

<p>第二種渲染方式: 擴充套件性較高 書寫較為繁瑣</p>
<label for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}</label>
{{ form_obj.username }}
{{ form_obj.password.label }}{{ form_obj.password }}
{{ form_obj.email.label }}{{ form_obj.email }}

第三種方式 for迴圈 （推薦）

推薦使用，for迴圈方式

{{ form.errors.0 }} # 這個是模板語法

<p>第三種渲染方式 推薦使用</p>
<form action="" method="post" novalidate>
  {% for form in form_obj %}
  <p>
    {{ form.label }}{{ form }}
    <span>{{ form.errors.0 }}</span>
  </p>
  {% endfor %}
  <input type="submit">
</form>

六、資料校驗

*******資料校驗一個前後端都得有 但是前端的校驗弱不禁風 可有可無

而後端的校驗則必須非常全面

如何取消瀏覽器自動幫我們校驗的功能？

在form後加引數 no validate，不驗證

form表單取消前端瀏覽器自動校驗功能 
  <form action="" method="post" novalidate>

常用校驗引數

max_length //允許輸入的最大長度
min_length //最小長度
label input的提示資訊，name、password等
error_messages 自定義報錯的提示資訊
'max_length':"使用者名稱最長8位",
'min_length':"使用者名稱最短3位",
'required':"使用者名稱不能為空"
required 設定欄位是否允許為空
initial 設定預設值
widget 控制type型別及屬性

使用方式

CharField使用者名稱型別校驗

from django.forms import widgets  //不匯入也可以，沒提示

class MyRegForm(forms.Form):
  # 使用者名稱最少3位最多8位
  username = forms.CharField(max_length=8,min_length=3,label='使用者名稱',error_messages={   //報錯資訊的提示
                  'max_length':"使用者名稱最長8位",'min_length':"使用者名稱最短3位",'required':"使用者名稱不能為空"
                },required=False,initial='jeff',// 為空和預設值
                widget=forms.widgets.TextInput(attrs={'class':'form-control c1 c2'}),//設定input的type屬性為text，及class屬性
                )

password校驗

class LoginForm(forms.Form):
  ...
  pwd = forms.CharField(
    min_length=6,label="密碼",widget=forms.widgets.PasswordInput(attrs={'class': 'c1'},render_value=True)
  )

郵箱型別校驗

class MyRegForm(forms.Form):
  # email欄位必須填寫符合郵箱格式的資料
  email = forms.EmailField(label='郵箱',error_messages={
    'required':'郵箱必填','invalid':'郵箱格式不正確'
  })

手機號型別校驗

正則匹配

from django.core.validators import RegexValidator
class MyRegForm(forms.Form):
  # 手機號
  phone = forms.CharField(
    validators=[
      RegexValidator(r'^[0-9]+$','請輸入數字'),RegexValidator(r'^159[0-9]+$','數字必須以159開頭')
    ]
  )

性別校驗

  gender = forms.ChoiceField(
    choices=((1,"男"),(2,"女"),(3,"保密")),label="性別",initial=3,widget=forms.widgets.RadioSelect()
  )

愛好單選 select校驗

  hobby = forms.ChoiceField(
    choices=((1,"籃球"),"足球"),"雙色球"),),label="愛好",widget=forms.widgets.Select()  # 單選
  )

愛好多選select 校驗1

  hobby1 = forms.MultipleChoiceField(
    choices=((1,initial=[1,3],widget=forms.widgets.SelectMultiple()
  )

愛好多選chekbox校驗2

 hobby2 = forms.MultipleChoiceField(
    choices=((1,widget=forms.widgets.CheckboxSelectMultiple()
  )

是否記住密碼校驗

  keep = forms.ChoiceField(
    label="是否記住密碼",initial="checked",widget=forms.widgets.CheckboxInput()
  )

七、鉤子函式

# 如果你想同時操作多個欄位的資料你就用全域性鉤子
# 如果你想操作單個欄位的資料 你就用區域性鉤子
鉤子勾回來處理完之後，還要還回去的

區域性鉤子

校驗使用者名稱中不能包含666

# 區域性鉤子
# 這裡的self是自己類，MyRegForm
  def clean_username(self):
    username = self.cleaned_data.get('username')
    if '666' in username:
      self.add_error('username','光喊666是不行的')
    return username

全域性鉤子

兩次密碼驗證

class MyRegForm(forms.Form):
  # 密碼
  password = forms.CharField(max_length=8,label='密碼',widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
               )
  # 密碼驗證
  re_password = forms.CharField(max_length=8,label='確認密碼',widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
                 )

  def clean(self):
    # 這裡的self是自己類，MyRegForm
    # 校驗密碼和確認密碼是否一致
    password = self.cleaned_data.get('password')
    re_password = self.cleaned_data.get('confirm_password')
    if not password == re_password:
      # 展示提示資訊
      self.add_error('re_password','兩次密碼不一致')
      return self.cleaned_data

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

Django之form元件自動校驗資料實現

一、form介紹 我們之前在HTML頁面中利用form表單向後端提交資料時，都會寫一些獲取使用者輸入的標籤並且用form標籤把它們包起來。

Django之form元件驗證

建立Form類： from django import forms from django.forms import widgets from django.forms import fields

element ui使用v-for迴圈form表單校驗的實現

<template> <el-form :model=\"dynamicValidateForm\" ref=\"dynamicValidateForm\" label-width=\"120px\" class=\"demo-dynamic\">

23.Django（form元件 自定製校驗規則、鉤子、更改圖書管理系統）

自定製校驗規則 之前form表單給我們提供了一些校驗功能： 這些基本你的校驗功能，不足以滿足我們日常的需要，使用者名稱不允許出現敏感字元，電話號碼的驗證，等等。

Django的form元件——自定義校驗函式

from django.shortcuts import render,HttpResponse from django import forms from django.core.exceptions import ValidationError#校驗錯誤

golang之資料校驗的實現程式碼示例

目前大都是使用validator 安裝 go get gopkg.in/go-playground/validator.v9 原理 當然只能通過反射來實現了，之前寫過一篇反射的文章golang之反射和斷言 ，裡面有寫到怎麼通過反射獲取struct tag。

個人部落格 Django 評論模組開發總結【四】JavaScript邏輯，請求渲染校驗資料

JavaScript邏輯，請求渲染校驗資料 個人網站開通評論了 https://www.charmcode.cn/article/2020-07-09_Comment

Vue之ElementUI Form表單校驗

表單校驗是前端開發過程中最常用到的功能之一，根據個人的工作經驗總結在此對錶單校驗功能的基礎用法進行整理說明。

自定義元件實現v-model,並通過element的form表單校驗

做專案時，我們經常會遇到表單項不單單是input,select框這些基礎表單項，有時候會在表單裡出現一些較為複雜的自定義元件，比如下圖中的插槽型別元件：

Spring-Validation 後端資料校驗的實現

前言 最近看到很多童鞋在專案中的對請求引數的校驗都用的if來判斷各引數的屬性，如：

EelemntUI中e-form表單校驗的使用以及表單校驗的規則

場景 Form 元件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將 Form-Item 的 prop 屬性設定為需校驗的欄位名即可。

Java如何使用JSR303校驗資料與自定義校驗註解

一、自帶校驗註解實現資料校驗 1、web專案匯入依賴 <!-- 該依賴預設匯入了 hibernate-validator 所以不需要再單獨匯入 -->

Form自定義校驗

<Form.Item colon={false} {...formItemLayout} label={formatMessage({ id: \'DataClassifyConfig.subtypeCode\',

Django之Forms元件

1、forms元件的使用 #1、匯入forms模組 from django import forms #2、建立forms類，繼承forms.Form

Django之Form

Form介紹 我們之前在HTML頁面中利用form表單向後端提交資料時，都會寫一些獲取使用者輸入的標籤並且用form標籤把它們包起來。

基於SpringBoot服務端表單資料校驗的實現方式

SpringBoot服務端表單資料校驗 （SpringBoot高階） 一、實現新增使用者功能 1 建立專案

Django與form元件

Forms元件: 是Django提供的用於資料校驗和模板渲染的元件, 在Django使用該元件可以便捷的幫助我們來完成很多事情;下面會對forms元件的每一個功能進行詳細的介紹和實際的使用方法

django之auth元件等相關內容-76

1 auth元件介紹 我們需要實現包括使用者註冊、使用者登入、使用者認證、登出、修改密碼等功能,內建了強大的使用者認證系統--auth，是一個app

vue3.0實現點選切換驗證碼(元件)及校驗

本文例項為大家分享了vue3.0實現點選切換驗證碼(元件)及校驗的具體程式碼，供大家參考，具體內容如下

10Vue元件引數校驗和非Props特性

1.元件引數校驗 一個父元件向子元件傳值的程式碼： <body> <div id=\"app\">