IDC

一篇文章带你了解Django Form组件(入门篇)

作者:admin 2021-07-23 我要评论

前言 Hey,大家好呀,我是码农,星期八。 本次咱们来get一个新技能,Form组件。 Form组件主要用于验证表单数据。 为什么需要Form组件 注:Form组件,只适用于,前后端未...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

 

前言

Hey,大家好呀,我是码农,星期八。

本次咱们来get一个新技能,Form组件。

Form组件主要用于验证表单数据。

为什么需要Form组件

注:Form组件,只适用于,前后端未分离的项目中,主要用于验证表单数据,所以,关键字是表单!!!

比如像哔哩哔哩的注册界面。


我点击注册,它不仅仅可以知道我的注册昵称是否存在,密码是否小于6位,手机号格式错误

还会把错误信息一直留在上面,给我提示。

我们就以这个为雏形,来简单的写一个小小的注册界面。

普通版注册

代码

urls.py

  1. from django.urls import path 
  2. from web import views 
  3.  
  4. urlpatterns = [ 
  5.     path('reg/', views.reg,), 

web/views.py

  1. def reg(request): 
  2.     if request.method == "GET"
  3.         return render(request, "reg.html"
  4.  
  5.     nick = request.POST.get("nick"
  6.     pwd = request.POST.get("pwd"
  7.     phone = request.POST.get("phone"
  8.  
  9.     error = {} 
  10.     if len(pwd) < 6: 
  11.         error["pwd"] = "密码小于6位" 
  12.     if len(phone) != 11: 
  13.         error["phone"] = "手机号格式错误" 
  14.  
  15.     # error为空表示未触发异常 
  16.     if not error: 
  17.         print("写入数据库", nick, pwd, phone) 
  18.         return HttpResponse("注册成功"
  19.     else
  20.         return render(request, "reg.html", {"error": error}) 

templates/reg.html

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>登录</title> 
  6. </head> 
  7. <body> 
  8. <div style="width: 40%;margin: auto"
  9.     <form action="" method="post"
  10.         <div><input name="nick" type="text" placeholder="昵称"></div> 
  11.         <div> 
  12.             <input name="pwd" type="password" placeholder="密码"
  13.             <span>{{ error.pwd }}</span> 
  14.         </div> 
  15.         <div> 
  16.             <input name="phone" type="text" placeholder="手机号"
  17.             <span>{{ error.phone }}</span> 
  18.         </div> 
  19.         <div><input type="submit"></div> 
  20.     </form> 
  21. </div> 
  22.  
  23. </body> 
  24. </html> 

实现效果

如果填写的信息正常。

填写信息

跳转之后


如果填写的信息错误。

填写信息


错误提示


小总结

但是你发现虽然能把错误信息显示出来。

但是我原来填写的东西没了啊!!!,因为html form表单提交是刷新页面提交的!

雾草,没了,这是少的,如果有十几个???,那不就气死了

好像我记得我上学时,好多网站都是这。。。好像我也骂了很久,直到前后端分离时,才好一点!

Form组件版注册

再使用之前,需要将Django项目的settings.py的LANGUAGE_CODE设置为zh-hans


代码

以下代码可能看不懂,大概理解就好!

urls.py

同上

web/views.py

  1. from django.shortcuts import render, HttpResponse 
  2. from django.forms import Form 
  3. from django.forms import fields 
  4. from django.forms import widgets 
  5.  
  6.  
  7. Create your views here. 
  8. class RegForm(Form): 
  9.     name = fields.CharField( 
  10.         widget=widgets.TextInput(attrs={"placeholder""昵称"}) 
  11.     ) 
  12.     pwd = fields.CharField( 
  13.         min_length=6, 
  14.         widget=widgets.TextInput(attrs={"placeholder""密码"}) 
  15.     ) 
  16.     phone = fields.CharField( 
  17.         min_length=11, 
  18.         max_length=11, 
  19.         widget=widgets.TextInput(attrs={"placeholder""手机号"}) 
  20.     ) 
  21.  
  22.  
  23. def reg(request): 
  24.     if request.method == "GET"
  25.         form = RegForm() 
  26.         return render(request, "reg.html", {"form": form}) 
  27.     form = RegForm(request.POST, request.FILES) 
  28.     # 验证表单数据 
  29.     if form.is_valid(): 
  30.         result = form.clean() 
  31.         print(result) 
  32.         return HttpResponse("登录"
  33.     return render(request, "reg.html", {"form": form}) 

templates/reg.html

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>登录</title> 
  6. </head> 
  7. <body> 
  8. <div style="width: 40%;margin: auto"
  9.     <form action="" method="post" novalidate> 
  10.         {% for foo in form %} 
  11.             <div> 
  12.                 {{ foo }} 
  13.                 <span style="color: red">{{ foo.errors.0 }}</span> 
  14.             </div> 
  15.         {% endfor %} 
  16.         <div><input type="submit"></div> 
  17.     </form> 
  18. </div> 
  19.  
  20. </body> 
  21. </html> 

实现效果

如果填写的信息正常。

同上

如果填写的信息错误。


小总结

这是我点击提交之后报错的结果!

可以发现,即使刷新页面提交,还是会把原来的数据保存下来,并且还有验证失败的信息!

Form总结

从上述示例可以发现。

Django Form组件最起码具有以下功能:

  • 生成HTML标签。
  • 验证提交的数据。
  • 保留提交之前的数据。

没错,它的主要功能其实也就是这。

如果使用Django进行开发,并且使没有前后端分离的,必用Form组件!

每一份发奋努力的背后,必定有巨大的赏赐。


本文转载自网络,原文链接:https://mp.weixin.qq.com/s/2fjSz84mbmfcEiwniQvVrg

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 2020年12月超实用设计干货大合集

    2020年12月超实用设计干货大合集

  • 深入理解JavaScript中的箭头函数

    深入理解JavaScript中的箭头函数

  • Skywalking分布式链路追踪入门

    Skywalking分布式链路追踪入门

  • 连续3年稳居第一,全球1240万用户,Jav

    连续3年稳居第一,全球1240万用户,Jav

腾讯云代理商
海外云服务器