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(表单)组件的使用方法,这个组件不依赖于 ...
随机推荐
- 【环境配置】本地配置sublime text以及和远程linux设置sftp
工具: sublime text 2(mac版) 远程linux(centos 7系) securCRT(for mac) [本地安装并配置securCRT(for mac)] 关于配置: 1.解决终 ...
- openshift上传java web项目
下载当前客户端 OC(Openshift Client) https://mirror.openshift.com/pub/openshift-v3/clients/3.9.14/windows/oc ...
- zh-cn 与 zh-hans 是什么关系、有什么区别
回答一: 作者:知乎用户 链接:https://www.zhihu.com/question/21980689/answer/19923726 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权 ...
- c++中“箭头（->）”和“点号（.）”操作符的区别
首先介绍一下C++中的结构.对于一个结构: struct MyStruct { int member_a; }; 如果有个变量MyStruct s,那么使用其中的成员元素时可以用: s.member_ ...
- git 本地仓库与远程仓库的连接
在远程如github新建一个项目名称为blog, 本地项目为store,是一个laravel框架项目,首先用 git init初始化本目,然后用git remote add origin git@gi ...
- DtCMS 在IIS7.0 下之伪静态
1)首先新建一个应用程序池,名称任意,比如:nettest,托管管道模式先暂时设置为集成模式,等下面的一系列设置完成之后再设置成经典模式: 2)部署好站点,并将此站点的应用程序池设置为nettest; ...
- Numpy copy & deep copy
1. '='的赋值方式会带有关联性 >>> import numpy as np >>> a = np.arange(4) >>> b = a & ...
- spring读取properties的几种方式
参考链接:http://www.cnblogs.com/zxf330301/p/6184139.html
- 从1~N中任选出三个数,最小公倍数最大
已知一个正整数N,问从1~N中任选出三个数,它们的最小公倍数最大可以为多少. 当n为奇数:n.n-1.n-2这是三个最大数,并且它们两两互质.因为连续的奇.偶.奇,互质.连续的两个数互质是因为它们的公 ...
- Continuous Subarray Sum LT523
Given a list of non-negative numbers and a target integer k, write a function to check if the array ...