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对list列表结构中的值进行去重的方法总结
May 07 Python
快速入手Python字符编码
Aug 03 Python
详解python的数字类型变量与其方法
Nov 20 Python
基于python中staticmethod和classmethod的区别(详解)
Oct 24 Python
Python入门之三角函数sin()函数实例详解
Nov 08 Python
[原创]pip和pygal的安装实例教程
Dec 07 Python
python实现上传文件到linux指定目录的方法
Jan 03 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
Mar 10 Python
python实现梯度法 python最速下降法
Mar 24 Python
Python利用for循环打印星号三角形的案例
Apr 12 Python
python如何提升爬虫效率
Sep 27 Python
Python中Numpy和Matplotlib的基本使用指南
Nov 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python 26进制计算实现方法
2015/05/28 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python文件操作方法详解
2020/02/09 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
六道php面试题附答案
2014/06/05 面试题
毕业生就业自荐书
2013/12/15 职场文书
秘书英文求职信范文
2014/01/31 职场文书
收款委托书范本
2014/09/11 职场文书
总经理检讨书
2014/09/15 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
考察邀请函范文
2015/01/31 职场文书
慈善募捐倡议书
2015/04/27 职场文书
紧急迫降观后感
2015/06/15 职场文书
社区安全温馨提示语
2015/07/14 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
基于Redis位图实现用户签到功能
2021/05/08 Redis