HTML的form表单和django的form表单


Posted in Python onJuly 25, 2019

django的表单系统,分2种

  • 基于django.forms.Form的所有表单类的父类
  • 基于django.forms.ModelForm,可以和模型类绑定的Form

直接用原生的form表单,也可以直接用,较麻烦,

django的form表单,也可用可不要,

在views里创建一个类,继承了forms.Form ,每个字段就是一个输入框,

#-----
#django 的form表单

from django import forms

class MyForm(forms.Form):
  #forms对应的是前端的form表单,form 表单要验证的字段
  #都与校验有关系,与数据库没有关系

  #封装性强,可以 在前端指定显示那些字段,label 是显示指定的数据,
  user = forms.CharField(label="用户名")#输入的用户名,
  age = forms.IntegerField(label="年龄")
  email = forms.EmailField()


#form注册

def reg2(request):
  # 实列化出一个form对象,传到前端

  form_obj = MyForm()

  return render(request,"reg2.html",{"form_obj":form_obj})

在前端新建一个注册页面,前端渲染表单,是后端表单类实例出来的对象,用对象调用每个字段,

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

</head>
<body>

<h3>form表单使用</h3>
<form action="/reg2/" method="post">
{#  渲染从后端传来的变量,as_p 是段落#}
  {% csrf_token %}
{#  {{ form_obj.as_p }}#}
  <p>姓名{{ form_obj.user }}</p>
  <p>年龄{{ form_obj.age }}</p>
  <p>邮箱{{ form_obj.email }}</p>

</form>

</body>

</html>

可以从浏览器的检查元素中看到,浏览器自动添加了一些东西,

<body>

<h3>form表单使用</h3>
<form action="/reg2/" method="post">

  <input name="csrfmiddlewaretoken" value="GyY3KE5uM7HeErOEZ8OQFwUJYQYaknrOmavdmfufBuVOHdDSWfeHDyt2pjXarGAV" type="hidden">

  <p>姓名<input name="user" required="" id="id_user" type="text"></p>
  <p>年龄<input name="age" required="" id="id_age" type="number"></p>
  <p>邮箱<input name="email" required="" id="id_email" type="email"></p>

</form>
</body>

如果在前端页面随便输入就提交,前端会做校验,这都是浏览器做的校验,

HTML的form表单和django的form表单

可以自己定制,字段的错误信息提示,和显示信息,

#django 的form表单
 
from django import forms
 
class MyForm(forms.Form):
  #forms对应的是前端的form表单,form 表单要验证的字段
  #都与校验有关系,与数据库没有关系
 
  #封装性强,可以 在前端指定显示那些字段,label 是显示指定的数据,require 是必须填写的,
  user = forms.CharField(label="用户名",min_length=5,max_length=8)#输入的用户名,
  age = forms.IntegerField(label="年龄",error_messages={"required":"必填",})
  email = forms.EmailField()
 
 
#form注册
 
def reg2(request):
 
  errors_obj = " "
  if request.method == "POST":
    form_post = MyForm(request.POST)#拿到请求的所有数据
    if form_post.is_valid():#判断数据是否合法,返回布尔值,
 
      print("data",form_post.cleaned_data)#获取数据,得到一个字典格式,
 
    #添加数据库
    # User.objects.create_user()
  # 实列化出一个form对象,传到前端
 
    #如果是输入不合格式的信息,错误信息,
    else:
      #获取错误信息
      errors_obj = form_post.errors
 
      # print("error",form_post.errors["user"][0])
      # print("error",form_post.errors["age"])
      # print("error",type(form_post.errors))#字典类型,
 
 
  form_obj = MyForm()
 
  return render(request,"reg2.html",{"form_obj":form_obj,"errors_obj":errors_obj})

在前端页面

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

</head>
<body>

<h3>form表单使用</h3>
<form action="/reg2/" method="post">
{#  渲染从后端传来的变量,as_p 是段落#}
  {% csrf_token %}
{#  {{ form_obj.as_p }}#}
  <p>姓名{{ form_obj.user }} <span>{{ errors.obj.user.0 }}</span> </p>
  <p>年龄{{ form_obj.age }}<span>{{ errors.obj.age.0 }}</span></p>
  <p>邮箱{{ form_obj.email }}<span>{{ errors.obj.email.0 }}</span></p>
  <input type="submit">

</form>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python迭代器实例简析
Sep 25 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
Oct 08 Python
python cx_Oracle模块的安装和使用详细介绍
Feb 13 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
Apr 21 Python
pycharm中连接mysql数据库的步骤详解
May 02 Python
python使用pdfminer解析pdf文件的方法示例
Dec 20 Python
python在回调函数中获取返回值的方法
Feb 22 Python
python3中eval函数用法使用简介
Aug 02 Python
在Python中使用filter去除列表中值为假及空字符串的例子
Nov 18 Python
python——全排列数的生成方式
Feb 26 Python
Python txt文件常用读写操作代码实例
Aug 03 Python
python自动化之如何利用allure生成测试报告
May 02 Python
Python3 批量扫描端口的例子
Jul 25 #Python
python3 批量获取对应端口服务的实例
Jul 25 #Python
Python实现微信小程序支付功能
Jul 25 #Python
Form表单及django的form表单的补充
Jul 25 #Python
python实现切割url得到域名、协议、主机名等各个字段的例子
Jul 25 #Python
python按修改时间顺序排列文件的实例代码
Jul 25 #Python
在python中用url_for构造URL的方法
Jul 25 #Python
You might like
php+mysql数据库查询实例
2015/01/21 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python time库基本使用方法分析
2019/12/13 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python中yield的用法详解
2021/01/13 Python
应届毕业生求职信范文分享
2013/12/26 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
机电系毕业生求职信
2014/07/11 职场文书
社区两委对照检查材料
2014/08/23 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
教学反思怎么写
2016/02/24 职场文书