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中使用正则表达式的后向搜索肯定模式(推荐)
Nov 11 Python
Python制作豆瓣图片的爬虫
Dec 28 Python
python实现比较文件内容异同
Jun 22 Python
详解如何将python3.6软件的py文件打包成exe程序
Oct 09 Python
Python 窗体(tkinter)按钮 位置实例
Jun 13 Python
python文件操作的简单方法总结
Nov 07 Python
Anaconda的安装及其环境变量的配置详解
Apr 22 Python
Python列表如何更新值
May 27 Python
python实现MD5进行文件去重的示例代码
Jul 09 Python
OpenCV实现常见的四种图像几何变换
Apr 01 Python
使用Python拟合函数曲线
Apr 14 Python
Python中的 enumerate和zip详情
May 30 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作的文本留言本的例子(一)
2006/10/09 PHP
PHP的面试题集
2006/11/19 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
快速入门Vue
2016/12/19 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
vue写一个组件
2018/04/09 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
恒华伟业笔试面试题
2015/02/26 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
数学教研活动总结
2014/07/02 职场文书
沈阳故宫导游词
2015/01/31 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android