Django forms組件的使用教程

更新時(shí)間：2018年10月08日 10:26:13 作者：蟹小老板

服務(wù)端假設(shè)所有用戶提交的數(shù)據(jù)都是不可信任的，所以Django框架內(nèi)置了form組件來驗(yàn)證用戶提交的信息，這篇文章主要介紹了Django forms組件的使用教程，感興趣的小伙伴們可以參考一下

編寫Django的form表單，非常類似我們?cè)谀Ｐ拖到y(tǒng)里編寫一個(gè)模型。在模型中，一個(gè)字段代表數(shù)據(jù)表的一列，而form表單中的一個(gè)字段代表<form>中的一個(gè)<input>元素。

一，forms組件：

校驗(yàn)字段功能

針對(duì)一個(gè)實(shí)例：注冊(cè)用戶講解。

模型：models.py

class UserInfo(models.Model):
  name=models.CharField(max_length=32)
  pwd=models.CharField(max_length=32)
  email=models.EmailField()
  tel=models.CharField(max_length=32)

模板: register.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<form action="" method="post">
  {% csrf_token %} 
  <div>
    <label for="user">用戶名</label>
    <p><input type="text" name="name" id="name"></p>
  </div>
  <div>
    <label for="pwd">密碼</label>
    <p><input type="password" name="pwd" id="pwd"></p>
  </div>
  <div>
    <label for="r_pwd">確認(rèn)密碼</label>
    <p><input type="password" name="r_pwd" id="r_pwd"></p>
  </div>
   <div>
    <label for="email">郵箱</label>
    <p><input type="text" name="email" id="email"></p>
  </div>
  <input type="submit">
</form>

</body>
</html>

視圖函數(shù)：register

# forms組件
from django.forms import widgets

wid_01=widgets.TextInput(attrs={"class":"form-control"})
wid_02=widgets.PasswordInput(attrs={"class":"form-control"})

class UserForm(forms.Form):
  name=forms.CharField(max_length=32,
             widget=wid_01
             )
  pwd=forms.CharField(max_length=32,widget=wid_02)
  r_pwd=forms.CharField(max_length=32,widget=wid_02)
  email=forms.EmailField(widget=wid_01)
  tel=forms.CharField(max_length=32,widget=wid_01)

def register(request):

  if request.method=="POST":
    form=UserForm(request.POST)
    if form.is_valid():
      print(form.cleaned_data)    # 所有干凈的字段以及對(duì)應(yīng)的值
    else:
      print(form.cleaned_data)    #
      print(form.errors)       # ErrorDict : {"校驗(yàn)錯(cuò)誤的字段":["錯(cuò)誤信息",]}
      print(form.errors.get("name")) # ErrorList ["錯(cuò)誤信息",]
    return HttpResponse("OK")
  form=UserForm()
  return render(request,"register.html",locals())

1，渲染標(biāo)簽功能

渲染方式1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet"  rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h3>注冊(cè)頁面</h3>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-offset-3">

        <form action="" method="post">
          {% csrf_token %}
          <div>
            <label for="">用戶名</label>
            {{ form.name }}
          </div>
          <div>
            <label for="">密碼</label>
            {{ form.pwd }}
          </div>
          <div>
            <label for="">確認(rèn)密碼</label>
            {{ form.r_pwd }}
          </div>
          <div>
            <label for=""> 郵箱</label>
            {{ form.email }}
          </div>

          <input type="submit" class="btn btn-default pull-right">
        </form>
    </div>
  </div>
</div>
</body>
</html>

渲染方式2

<form action="" method="post">
          {% csrf_token %}

          {% for field in form %}
            <div>
              <label for="">{{ field.label }}</label>
              {{ field }}
            </div>
          {% endfor %}
          <input type="submit" class="btn btn-default pull-right">

</form>

渲染方式3

<form action="" method="post">
  {% csrf_token %}

  {{ form.as_p }}
  <input type="submit" class="btn btn-default pull-right">

</form>

2，顯示錯(cuò)誤與重置輸入信息功能

視圖

def register(request):

  if request.method=="POST":
    form=UserForm(request.POST)
    if form.is_valid():
      print(form.cleaned_data)    # 所有干凈的字段以及對(duì)應(yīng)的值
    else:
      print(form.cleaned_data)    #
      print(form.errors)       # ErrorDict : {"校驗(yàn)錯(cuò)誤的字段":["錯(cuò)誤信息",]}
      print(form.errors.get("name")) # ErrorList ["錯(cuò)誤信息",]
    return render(request,"register.html",locals())
  form=UserForm()
  return render(request,"register.html",locals())

模板

<form action="" method="post" novalidate>
  {% csrf_token %}

  {% for field in form %}
    <div>
      <label for="">{{ field.label }}</label>
      {{ field }} <span class="pull-right" style="color: red">{{ field.errors.0 }}</span>
    </div>
  {% endfor %}
  <input type="submit" class="btn btn-default">

</form>

3，局部鉤子與全局鉤子

模板

# forms組件
from django.forms import widgets

wid_01=widgets.TextInput(attrs={"class":"form-control"})
wid_02=widgets.PasswordInput(attrs={"class":"form-control"})

from django.core.exceptions import ValidationError
class UserForm(forms.Form):
  name=forms.CharField(max_length=32,
             widget=wid_01
             )
  pwd=forms.CharField(max_length=32,widget=wid_02)
  r_pwd=forms.CharField(max_length=32,widget=wid_02)
  email=forms.EmailField(widget=wid_01)
  tel=forms.CharField(max_length=32,widget=wid_01)

  # 局部鉤子
  def clean_name(self):
    val=self.cleaned_data.get("name")
    if not val.isdigit():
      return val
    else:
      raise ValidationError("用戶名不能是純數(shù)字!")

  # 全局鉤子

  def clean(self):
    pwd=self.cleaned_data.get("pwd")
    r_pwd=self.cleaned_data.get("r_pwd")

    if pwd==r_pwd:
      return self.cleaned_data
    else:
      raise ValidationError('兩次密碼不一致!')

def register(request):

  if request.method=="POST":
    form=UserForm(request.POST)
    if form.is_valid():
      print(form.cleaned_data)    # 所有干凈的字段以及對(duì)應(yīng)的值
    else:
      clean_error=form.errors.get("__all__")

    return render(request,"register.html",locals())
  form=UserForm()
  return render(request,"register.html",locals())

視圖

<form action="" method="post" novalidate>
      {% csrf_token %}

      {% for field in form %}
        <div>
          <label for="">{{ field.label }}</label>
          {{ field }}
          <span class="pull-right" style="color: red">
             {% if field.label == 'R pwd' %}
             <span>{{ clean_error.0 }}</span>
             {% endif %}
             {{ field.errors.0 }}
          </span>
        </div>
      {% endfor %}
      <input type="submit" class="btn btn-default">

</form>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: