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实现倒计时的示例
Feb 14 Python
Python实时获取cmd的输出
Dec 13 Python
Python网络编程中urllib2模块的用法总结
Jul 12 Python
python使用psutil模块获取系统状态
Aug 27 Python
Python 正则表达式入门(初级篇)
Dec 07 Python
Python实现批量压缩图片
Jan 25 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
Jul 07 Python
详解Python中的正斜杠与反斜杠
Aug 09 Python
Python matplotlib画曲线例题解析
Feb 07 Python
python通过对字典的排序,对json字段进行排序的实例
Feb 27 Python
pandas使用函数批量处理数据(map、apply、applymap)
Nov 27 Python
python百行代码实现汉服圈图片爬取
Nov 23 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 透明水印生成代码
2012/08/27 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
动态控制Table的js代码
2007/03/07 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
详解用python写一个抽奖程序
2019/05/10 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
四年级语文教学反思
2014/02/05 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
离婚财产处理协议书
2014/09/30 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
英文辞职信范文
2015/05/13 职场文书
比较node.js和Deno
2021/04/27 Javascript
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技