Form表单

阅读目录(Content)

Form介绍

普通的登录

使用form组件

Form那些事儿

  • 常用字段演示

校验

使用Django Form流程

补充进阶

  • 应用Bootstrap样式

  • 批量添加样式

官方链接

Form介绍

我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。

与此同时我们在好多场景下都需要对用户的输入做校验，比如校验用户是否输入，输入的长度和格式等正不正确。如果用户输入的内容有错误就需要在页面上相应的位置显示显示对应的错误信息.。

Django form组件就实现了上面所述的功能。

总结一下，其实form组件的主要功能如下:

  • 生成页面可用的HTML标签
  • 对用户提交的数据进行校验
  • 保留上次输入内容

普通的登录

views.py

def login(request):error_msg = ""if request.method == "POST":username = request.POST.get("username")pwd = request.POST.get("pwd")if username == "xiao" and pwd == "123456":return HttpResponse("OK") else: error_msg = "用户名或密码错误" return render(request, "login.html", {"error_msg": error_msg})

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>login</title><style>.error {color: red;}</style>
</head>
<body>
<form action="/login/" method="post">{% csrf_token %}<p><label for="username">用户名</label><input type="text" name="username" id="username"></p><p><label for="pwd">密码</label><input type="password" name="pwd" id="pwd"><span class="error"></span></p><p><input type="submit"><span class="error">{{ error_msg }}</span></p>
</form>
</body>
</html>

使用form组件

views.py

要先定义一个类

class TextForm(forms.Form):
# 用户名name = forms.CharField(min_length=6,label='用户名',error_messages={'min_length': '必须是6'},initial="张三", # 设置默认值 ) # 密码 password = forms.CharField( label='密码', error_messages={'min_length': '必须是6'}, widget=forms.widgets.PasswordInput(attrs={'class': 'c1'}, render_value=True) )

在定义一个text_form的函数

def text_form(request):# 实例化form_obj = TextForm()if request.method == 'POST':# 请求的内容传进去--必须包括类里面的内容form_obj = TextForm(request.POST)if form_obj.is_valid(): # 是个布尔值 username = form_obj.name password = form_obj.password # models.UserInfo.objects.create() return HttpResponse('成功了，可以跳转登陆页面') return render(request, 'text_form.html', {'form_obj': form_obj})

text_form.html
<form action="/text_form/" method="post" novalidate>{% csrf_token %}
{#用户名#}<p><label for="{{ form_obj.name.id_for_label }}">{{ form_obj.name.label }}</label>{{ form_obj.name }}<span>{{ form_obj.name.errors.0 }}</span></p>
{#密码#}<p><label for="{{ form_obj.password.id_for_label  }}">{{ form_obj.password.label  }}</label>{{ form_obj.password }}<span>{{ form_obj.name.errors.0 }}</span>

看网页效果发现 也验证了form的功能：
• 前端页面是form类的对象生成的                                      -->生成HTML标签功能
• 当用户名和密码输入为空或输错之后 页面都会提示        -->用户提交校验功能
• 当用户输错之后 再次输入 上次的内容还保留在input框   -->保留上次输入内容

Form那些事儿

　　常用字段演示

initial---初始值，input框里面的初始值。

class LoginForm(forms.Form):username = forms.CharField(min_length=8,label="用户名",initial="张三"  # 设置默认值)

error_messages

class LoginForm(forms.Form):username = forms.CharField(min_length=8,label="用户名",initial="张三",error_messages={ "required": "不能为空", "invalid": "格式错误", "min_length": "用户名最短8位" } )

password

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

radioSelect----单radio值为字符串

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

单选Select

 hobby = forms.fields.ChoiceField(choices=((1, "篮球"), (2, "足球"), (3, "双色球"), ),label="爱好",initial=3,widget=forms.widgets.Select

多选Select

hobby = forms.fields.MultipleChoiceField(choices=((1, "篮球"), (2, "足球"), (3, "双色球"), ),label="爱好",initial=[1, 3],widget=forms.widgets.SelectMultiple

单选checkbox

keep = forms.fields.ChoiceField(label="是否记住密码",initial="checked",widget=forms.widgets.CheckboxInput

多选checkbox

hobby = forms.fields.MultipleChoiceField(choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),label="爱好",initial=[1, 3],widget=forms.widgets.CheckboxSelectMultiple

关于choice的注意事项：

在使用选择标签时，需要注意choices的选项可以从数据库中获取，但是由于是静态字段 ***获取的值无法实时更新***，那么需要自定义构造方法从而达到此目的。（就是在数据里新添加的数据，是取不到的，然后我们需要想办法来解决）

方式一：

from django.forms import Form
from django.forms import widgets
from django.forms import fieldsclass MyForm(Form):user = fields.ChoiceField(# choices=((1, '上海'), (2, '北京'),), initial=2, widget=widgets.Select ) def __init__(self, *args, **kwargs): super(MyForm,self).__init__(*args, **kwargs) # self.fields['user'].widget.choices = ((1, '上海'), (2, '北京'),) # 或 self.fields['user'].widget.choices = models.Classes.objects.all().values_list('id','caption')

方式二：

from django import forms
from django.forms import fields
from django.forms import models as form_modelclass FInfo(forms.Form):authors = form_model.ModelMultipleChoiceField(queryset=models.NNewType.objects.all())# authors = form_model.ModelChoiceField(queryset=models.NNewType.objects.all())

Fieldrequired=True,               是否允许为空widget=None,                 HTML插件label=None,                  用于生成Label标签或显示内容initial=None,                初始值help_text='',                帮助信息(在标签旁边显示)error_messages=None,         错误信息 {'required': '不能为空', 'invalid': '格式错误'}show_hidden_initial=False,   是否在当前插件后面再加一个隐藏的且具有默认值的插件（可用于检验两次输入是否一直）validators=[],               自定义验证规则localize=False,              是否支持本地化disabled=False,              是否可以编辑label_suffix=None            Label内容后缀CharField(Field)max_length=None,             最大长度min_length=None,             最小长度strip=True                   是否移除用户输入空白IntegerField(Field)max_value=None,              最大值min_value=None,              最小值FloatField(IntegerField)...DecimalField(IntegerField)max_value=None,              最大值min_value=None,              最小值max_digits=None,             总长度decimal_places=None,         小数位长度BaseTemporalField(Field)input_formats=None          时间格式化   DateField(BaseTemporalField)    格式：2015-09-01
TimeField(BaseTemporalField)    格式：11:12
DateTimeField(BaseTemporalField)格式：2015-09-01 11:12DurationField(Field)            时间间隔：%d %H:%M:%S.%f...RegexField(CharField)regex,                      自定制正则表达式max_length=None,            最大长度min_length=None,            最小长度error_message=None,         忽略，错误信息使用 error_messages={'invalid': '...'}EmailField(CharField)      ...FileField(Field)allow_empty_file=False     是否允许空文件ImageField(FileField)      ...注：需要PIL模块，pip3 install Pillow以上两个字典使用时，需要注意两点：- form表单中 enctype="multipart/form-data"- view函数中 obj = MyForm(request.POST, request.FILES)URLField(Field)...BooleanField(Field)  ...NullBooleanField(BooleanField)...ChoiceField(Field)...choices=(),                选项，如：choices = ((0,'上海'),(1,'北京'),)required=True,             是否必填widget=None,               插件，默认select插件label=None,                Label内容initial=None,              初始值help_text='',              帮助提示ModelChoiceField(ChoiceField)...                        django.forms.models.ModelChoiceFieldqueryset,                  # 查询数据库中的数据empty_label="---------",   # 默认空显示内容to_field_name=None,        # HTML中value的值对应的字段limit_choices_to=None      # ModelForm中对queryset二次筛选ModelMultipleChoiceField(ModelChoiceField)...                        django.forms.models.ModelMultipleChoiceFieldTypedChoiceField(ChoiceField)coerce = lambda val: val   对选中的值进行一次转换empty_value= ''            空值的默认值MultipleChoiceField(ChoiceField)...TypedMultipleChoiceField(MultipleChoiceField)coerce = lambda val: val   对选中的每一个值进行一次转换empty_value= ''            空值的默认值ComboField(Field)fields=()                  使用多个验证，如下：即验证最大长度20，又验证邮箱格式fields.ComboField(fields=[fields.CharField(max_length=20), fields.EmailField(),])MultiValueField(Field)PS: 抽象类，子类中可以实现聚合多个字典去匹配一个值，要配合MultiWidget使用SplitDateTimeField(MultiValueField)input_date_formats=None,   格式列表：['%Y--%m--%d', '%m%d/%Y', '%m/%d/%y']input_time_formats=None    格式列表：['%H:%M:%S', '%H:%M:%S.%f', '%H:%M']FilePathField(ChoiceField)     文件选项，目录下文件显示在页面中path,                      文件夹路径match=None,                正则匹配recursive=False,           递归下面的文件夹allow_files=True,          允许文件allow_folders=False,       允许文件夹required=True,widget=None,label=None,initial=None,help_text=''GenericIPAddressFieldprotocol='both',           both,ipv4,ipv6支持的IP格式unpack_ipv4=False          解析ipv4地址，如果是::ffff:192.0.2.1时候，可解析为192.0.2.1， PS：protocol必须为both才能启用SlugField(CharField)           数字，字母，下划线，减号（连字符）...UUIDField(CharField)           uuid类型

Django form内置字段

校验

方式一：

from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.validators import RegexValidatorclass MyForm(Form):user = fields.CharField( validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^159[0-9]+$', '数字必须以159开头')], )

方式二：

import re
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.exceptions import ValidationError# 自定义验证规则
def mobile_validate(value):mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$') if not mobile_re.match(value): raise ValidationError('手机号码格式错误') class PublishForm(Form): title = fields.CharField(max_length=20, min_length=5, error_messages={'required': '标题不能为空', 'min_length': '标题最少为5个字符', 'max_length': '标题最多为20个字符'}, widget=widgets.TextInput(attrs={'class': "form-control", 'placeholder': '标题5-20个字符'})) # 使用自定义验证规则 phone = fields.CharField(validators=[mobile_validate, ], error_messages={'required': '手机不能为空'}, widget=widgets.TextInput(attrs={'class': "form-control", 'placeholder': u'手机号码'})) email = fields.EmailField(required=False, error_messages={'required': u'邮箱不能为空','invalid': u'邮箱格式错误'}, widget=widgets.TextInput(attrs={'class': "form-control", 'placeholder': u'邮箱'}))

使用Django Form流程

  1. urls.py配置关系映射
  2. views.py中创建Form类，定义字段的校验条件，在映射关系中实例化Form类，进行逻辑处理，将Form对象通过响应Response返回页面中
  3. 页面中调用实例化Form对象进行操作

补充进阶

应用Bootstrap样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"><title>login</title>
</head>
<body>
<div class="container"><div class="row"><form action="/login2/" method="post" novalidate class="form-horizontal">{% csrf_token %}<div class="form-group"><label for="{{ form_obj.username.id_for_label }}"class="col-md-2 control-label">{{ form_obj.username.label }}</label><div class="col-md-10">{{ form_obj.username }}<span class="help-block">{{ form_obj.username.errors.0 }}</span></div></div><div class="form-group"><label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label><div class="col-md-10">{{ form_obj.pwd }}<span class="help-block">{{ form_obj.pwd.errors.0 }}</span></div></div><div class="form-group"><label class="col-md-2 control-label">{{ form_obj.gender.label }}</label><div class="col-md-10"><div class="radio">{% for radio in form_obj.gender %}<label for="{{ radio.id_for_label }}">{{ radio.tag }}{{ radio.choice_label }}</label>{% endfor %}</div></div></div><div class="form-group"><div class="col-md-offset-2 col-md-10"><button type="submit" class="btn btn-default">注册</button></div></div></form></div>
</div><script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Django form应用Bootstrap样式简单示例

批量添加样式

可通过重写form类的init方法来实现

class LoginForm(forms.Form):username = forms.CharField(min_length=8,label="用户名",initial="张三",error_messages={"required": "不能为空","invalid": "格式错误","min_length": "用户名最短8位"}...def __init__(self, *args, **kwargs):super(LoginForm, self).__init__(*args, **kwargs)for field in iter(self.fields):self.fields[field].widget.attrs.update({'class': 'form-control'})

批量添加样式

官方链接

https://docs.djangoproject.com/en/1.11/ref/forms/

转载于:https://www.cnblogs.com/a438842265/p/8762562.html

第十篇 Form表单相关推荐

  1. 例子---PHP与Form表单终结篇

    现在我们来说一下使用input标签的file属性,上传文件到后台,并进行展示的小例子. 用到的知识点有:PHP后台处理.Form表单和table表格. 大体思路就是:在form表单上传文件信息,经过P ...

  2. android中怎么保存checkbox中的checked属性_第二十四天HTML中的form表单

    form表单 用于收集用户信息,如:登录.注册等场景:所有要提交的数据都必须放在form标签中 action:提交地址.动作,与input标签中typy标签的submit属性相关联. ,提交地址是ac ...

  3. 例子---PHP与Form表单前导篇

    ok,我们先为PHP和Form的交互打打基础. (1)form表单能够往后台传输数据,主要依赖于它的提交方式method:get和post. ①.get方式只能提交一些体积小的纯文本信息,约5k左右, ...

  4. Struts(十四)：通用标签-form表单

    form标签是struts2标签中一个重要标签: 可以生成html标签,使用起来和html的form标签差不多: Strut2的form标签会生成一个table,进行自动布局: 可以对表单提交的值进行 ...

  5. php form表单验证,Validform表单验证总结篇

    近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法: Demo:$(".demoform").Validform( ...

  6. 面试题准备（二十六）：form 表单

    文章目录 概述 form 表单 action target method enctype 解决表单同步提交 监听表单提交事件 阻止默认行为 快速获取表单中数据 快速清空表单 概述 网页中的表单主要负责 ...

  7. Java POJO Bean 对象与 Web Form 表单的自动装配

    PS: 我一直在找寻为什么 struts2有自动将form字段和getter setter 自动 匹配的功能, 这篇文章解答了我的疑惑 深度剖析:Java POJO Bean 对象与 Web Form ...

  8. 天河微信小程序入门《四》：融会贯通，form表单提交数据库

    天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

  9. 整理的16个有用的jQuery Form(表单)验证教程

    表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...

最新文章

  1. [luoguP4306][JSOI2010]连通数
  2. 音视频技术开发周刊 55期
  3. oracle日期数据格式,oracle日期数据格式
  4. 清除dns缓存命令行_怎么防止移动dns劫持，防止移动dns劫持要先了解什么是dns劫持...
  5. 译 | .NET Core 基础架构进化之路（二）
  6. Windows系统下，使用Emacs+Putty操作远程机器
  7. as本地仓库更改_如何将源仓库的更改同步到fork仓库？
  8. html5 文本框只能输入正整数,控制input文本框只能输入正整数
  9. 单树莓派/双树莓派+USRP+srsLTE分布式搭建4G LTE微基站
  10. 网络故障排查简单思路（思路见目录）
  11. DeepinXP Lite 完美精简版 |5.2|5.3|5.4|5.5|5.6|5.7|5.8|5.9|5.10||6.1New| 迅雷下载
  12. 双路服务器芯片组的发展
  13. BOEHM GC原理及总结
  14. 键盘上分数怎么计算机,分数符号怎样在电脑上？
  15. sql中on和where的区别在哪
  16. antd ellipsis
  17. CSS系列之修改滚动条的样式
  18. Markdown 基础入门
  19. 【BLE】CC2541之OAD
  20. 无法打开此计算机的组策略,无法运行gpedit.msc(组策略)的解决

热门文章

  1. Ueeidor 使用
  2. ALTER TABLE causes auto_increment resequencing, resulting in duplicate entry ’1′ for key
  3. xpath的数据和节点类型以及XPath中节点匹配的基本方法
  4. 代码： html 页面小效果 （集合，待补充）
  5. springMVC获取file，几种转换
  6. Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel
  7. php在线考试自动批卷_php网络在线考试组卷系统
  8. 网络编程--connect()、listen()、accept()
  9. leetcode算法题--三角形最小路径和
  10. python web自动化_Selenium+Python Web自动化