dj forms表单组件
手动的一个个去校验前端传过来的字段数据,是很麻烦的,利用django 的forms组件,对需要校验的字段定义好,能够大大提高效率。
校验字段功能


- from django.db import models
- 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)
app01/models.py
定义自己的forms,前端传过来的数据字段,要和forms里面的字段一样


- <!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">确认密码</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>
register.html


- 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) # 所有干净的字段以及对应的值
- else:
- print(form.cleaned_data) #
- print(form.errors) # ErrorDict : {"校验错误的字段":["错误信息",]}
- print(form.errors.get("name")) # ErrorList ["错误信息",]
- return HttpResponse("OK")
- form=UserForm()
- return render(request,"register.html",locals())
forms组件与处理视图
渲染标签功能


- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- </head>
- <body>
- <h3>注册页面</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="">确认密码</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>
渲染方式1


- <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>
渲染方式2


- <form action="" method="post">
- {% csrf_token %}
- {{ form.as_p }}
- <input type="submit" class="btn btn-default pull-right">
- </form>
渲染方式3
显示错误与重置输入信息功能
视图
- def register(request):
- if request.method=="POST":
- form=UserForm(request.POST)
- if form.is_valid():
- print(form.cleaned_data) # 所有干净的字段以及对应的值
- else:
- print(form.cleaned_data) #
- print(form.errors) # ErrorDict : {"校验错误的字段":["错误信息",]}
- print(form.errors.get("name")) # ErrorList ["错误信息",]
- 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>
局部钩子与全局钩子


- # 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("用户名不能是纯数字!")
- # 全局钩子
- 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) # 所有干净的字段以及对应的值
- else:
- clean_error=form.errors.get("__all__")
- return render(request,"register.html",locals())
- form=UserForm()
- return render(request,"register.html",locals())
view
---
app01/myforms.py


- from django import forms
- from django.forms import widgets
- from app01.models import UserInfo
- from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
- class UserForm(forms.Form):
- name = forms.CharField(min_length=4, label="用户名", error_messages={"required": "该字段不能为空"}, # label 用于前端展示
- widget=widgets.TextInput(attrs={"class": "form-control"})
- ) # html挂件
- pwd = forms.CharField(min_length=4, label="密码",
- widget=widgets.PasswordInput(attrs={"class": "form-control"})
- )
- r_pwd = forms.CharField(min_length=4, label="确认密码", error_messages={"required": "该字段不能为空"},
- widget=widgets.TextInput(attrs={"class": "form-control"}))
- email = forms.EmailField(label="邮箱", error_messages={"required": "该字段不能为空", "invalid": "格式错误"},
- widget=widgets.TextInput(attrs={"class": "form-control"}))
- tel = forms.CharField(label="手机号", widget=widgets.TextInput(attrs={"class": "form-control"}))
- # 对字段进行校验 clean_xx , 验证完记得要返回对应字段值
- def clean_name(self):
- val = self.cleaned_data.get("name") # cleaned_data 提交过来的干净的字段数据
- ret = UserInfo.objects.filter(name=val)
- if not ret:
- return val
- else:
- raise ValidationError("该用户已注册!")
- def clean_tel(self):
- val = self.cleaned_data.get("tel")
- if len(val) == 11:
- return val
- else:
- raise ValidationError("手机号格式错误")
- def clean(self):
- pwd = self.cleaned_data.get('pwd')
- r_pwd = self.cleaned_data.get('r_pwd')
- if pwd and r_pwd:
- if pwd == r_pwd:
- return self.cleaned_data
- else:
- raise ValidationError('两次密码不一致')
- else:
- return self.cleaned_data # 要返回数据
myforms.py
处理视图


- from django.shortcuts import render
- from app01.myforms import *
- def reg(request):
- if request.method == "POST":
- # print(request.POST)
- # form=UserForm({"name":"yu","email":"123@qq.com","xxxx":"alex"})
- form = UserForm(request.POST) # 前端传过来的form表单的name属性值应该与forms组件字段名称一致
- # print(form.is_valid()) # 返回布尔值
- if form.is_valid():
- print(form.cleaned_data) # {"name":"yuan","email":"123@qq.com"}
- else:
- print(form.cleaned_data) # {"email":"123@qq.com"}
- # print(form.errors) # {"name":[".........."]}
- # print(type(form.errors)) # ErrorDict
- # print(form.errors.get("name"))
- # print(type(form.errors.get("name"))) # ErrorList
- # print(form.errors.get("name")[0])
- # 全局钩子错误
- # print("error",form.errors.get("__all__")[0])
- errors = form.errors.get("__all__")
- return render(request, "reg.html", locals())
- '''
- form.is_valid() :返回布尔值
- form.cleaned_data :{"name":"yuan","email":"123@qq.com"}
- form.errors :{"name":[".........."]}
- '''
- form = UserForm()
- return render(request, "reg.html", locals())
app01/views.py
提交模板
模板渲染的3种方式


- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .error{
- color: red;
- }
- </style>
- <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
- integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col-md-6 col-lg-offset-3">
- {#<h3>简单form</h3>#}
- {##}
- {##}
- {#<form action="" method="post" novalidate>#}
- {# {% csrf_token %}#}
- {# <p>用户名<input type="text" name="name"></p>#}
- {# <p>密码 <input type="text" name="pwd"></p>#}
- {# <p>确认密码 <input type="text" name="r_pwd"></p>#}
- {# <p>邮箱 <input type="text" name="email"></p>#}
- {# <p>手机号 <input type="text" name="tel"></p>#}
- {# <input type="submit">#}
- {##}
- {#</form>#}
- <hr>
- <h3>forms组件渲染方式1</h3>
- <form action="" method="post" novalidate> {# 自己校验 #}
- {% csrf_token %}
- <p>{{ form.name.label }}
- {{ form.name }} <span class="pull-right error">{{ form.name.errors.0 }}</span>
- </p>
- <p>{{ form.pwd.label }}
- {{ form.pwd }} <span class="pull-right error">{{ form.pwd.errors.0 }}</span>
- </p>
- <p>确认密码
- {{ form.r_pwd }} <span class="pull-right error">{{ form.r_pwd.errors.0 }}</span><span class="pull-right error">{{ errors.0 }}</span>
- </p>
- <p>邮箱 {{ form.email }} <span class="pull-right error">{{ form.email.errors.0 }}</span></p>
- <p>手机号 {{ form.tel }} <span class="pull-right error">{{ form.tel.errors.0 }}</span></p>
- <input type="submit">
- </form>
- {#<h3>forms组件渲染方式2</h3>#}
- {##}
- {#<form action="" method="post" novalidate>#}
- {# {% csrf_token %}#}
- {##}
- {# {% for field in form %}#}
- {##}
- {# <div>#}
- {# <label for="">{{ field.label }}</label>#}
- {# {{ field }}#}
- {# </div>#}
- {##}
- {# {% endfor %}#} {# 每行的错误信息不好展示 #}
- {##}
- {# <input type="submit">#}
- {#</form>#}
- {##}
- {#<h3>forms组件渲染方式3 用的比较少</h3>#}
- {##}
- {#<form action="" method="post">#}
- {# {% csrf_token %}#}
- {##}
- {# {{ form.as_p }}#}
- {##}
- {# <input type="submit">#}
- {#</form>#}
- </div>
- </div>
- </div>
- </body>
- </html>
templates/reg.html
错误信息在定义forms的时选择添加与否
dj forms表单组件的更多相关文章
- Django form表单 组件
目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...
- 微信小程序-表单组件
button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...
- Vue组件之自定义表单组件
今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...
- Form( 表单) 组件
本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件.一. 加载方式表单组件只能在 JS 区域设置,首先定义一张表单.<form id="box ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- 页面注册系统--使用forms表单结合ajax
页面注册系统--使用forms表单结合ajax 在Django中通过forms构建一个表单 1.urls.py 配置路由 from django.conf.urls import url from d ...
- Python的Django框架中forms表单类的使用方法详解
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
- 「小程序JAVA实战」小程序的表单组件(25)
转自:https://idig8.com/2018/08/18/xiaochengxujavashizhanxiaochengxudebiaodanzujian25/ 来说下 ,小程序的基础组件.源码 ...
- 第二百二十一节,jQuery EasyUI,Form(表单)组件
jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
随机推荐
- HDU 4027 Can you answer these queries? (线段树区间修改查询)
描述 A lot of battleships of evil are arranged in a line before the battle. Our commander decides to u ...
- Properties 使用
Properties 属于Map 下HashTable的小弟 属于持久的属性集,他可以保存在流中或者在流中加载. 键和值都是字符串类型. 通常用于配置文件 方法介绍: 存放键值对:setPropert ...
- Android自定义view(一):制作一个最最最简单的自定义view
转载:https://blog.csdn.net/wsyizmao/article/details/78491422 浅谈安卓自定义view(一):制作一个最最最简单的自定义view 对于安卓程序员来 ...
- 利用scp 远程上传下载文件/文件夹
scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P port ...
- tomcat实现多端口、多域名访问(只针对一个tomcat)
说明:这个部分介绍如何在tomcat中进行配置,使同一个应用可以通过不同的端口号进行访问. 在某些需要进行安全控制的场景中会应用到.例如:不同地址段只能通过某个端口访问. 2 找到tomcat的主目录 ...
- .NET垃圾回收机制
在.net 编程环境中,系统的资源分为托管资源和非托管资源. 对于托管的资源的回收工作,是不需要人工干预回收的,而且你也无法干预他们的回收,所能够做的只是了解.net CLR如何做这些操作.也就是说 ...
- python3.6.5 路径处理与规范化
在Linux和Mac平台上,该函数会原样返回path,在windows平台上会将路径中所有字符转换为小写,并将所有斜杠转换为饭斜杠. >>> os.path.normcase('c: ...
- Charles基本使用
Charles使用 查找电脑IP,菜单选项helpàLocal IP Addresses 手机连接代理 手机打开WiFi,把代理模式设置为手动,设置主机名为Charles所在机器的ip,端口号为Cha ...
- 关于sortedlist 中值的添加,删除,索引测试.
SortedList 类代表了一系列按照键来排序的键/值对,这些键值对可以通过键和索引来访问. 排序列表是数组和哈希表的组合.它包含一个可使用键或索引访问各项的列表.如果您使用索引访问各项,则它是一个 ...
- 2Y - sort
给你n个整数,请按从大到小的顺序输出其中前m大的数. Input 每组测试数据有两行,第一行有两个数n,m(0<n,m<1000000),第二行包含n个各不相同,且都处于区间[-5000 ...