经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Django » 查看文章
Django forms组件的使用教程
来源:jb51  时间:2018/10/10 8:47:25  对本文有异议

编写Django的form表单,非常类似我们在模型系统里编写一个模型。在模型中,一个字段代表数据表的一列,而form表单中的一个字段代表<form>中的一个<input>元素。

一,forms组件:

校验字段功能

针对一个实例:注册用户讲解。

模型:models.py

  1. class UserInfo(models.Model):
  2. name=models.CharField(max_length=32)
  3. pwd=models.CharField(max_length=32)
  4. email=models.EmailField()
  5. tel=models.CharField(max_length=32)

模板: register.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6.  
  7. </head>
  8. <body>
  9.  
  10. <form action="" method="post">
  11. {% csrf_token %}
  12. <div>
  13. <label for="user">用户名</label>
  14. <p><input type="text" name="name" id="name"></p>
  15. </div>
  16. <div>
  17. <label for="pwd">密码</label>
  18. <p><input type="password" name="pwd" id="pwd"></p>
  19. </div>
  20. <div>
  21. <label for="r_pwd">确认密码</label>
  22. <p><input type="password" name="r_pwd" id="r_pwd"></p>
  23. </div>
  24. <div>
  25. <label for="email">邮箱</label>
  26. <p><input type="text" name="email" id="email"></p>
  27. </div>
  28. <input type="submit">
  29. </form>
  30.  
  31. </body>
  32. </html>

视图函数:register

  1. # forms组件
  2. from django.forms import widgets
  3.  
  4. wid_01=widgets.TextInput(attrs={"class":"form-control"})
  5. wid_02=widgets.PasswordInput(attrs={"class":"form-control"})
  6.  
  7. class UserForm(forms.Form):
  8. name=forms.CharField(max_length=32,
  9. widget=wid_01
  10. )
  11. pwd=forms.CharField(max_length=32,widget=wid_02)
  12. r_pwd=forms.CharField(max_length=32,widget=wid_02)
  13. email=forms.EmailField(widget=wid_01)
  14. tel=forms.CharField(max_length=32,widget=wid_01)
  15.  
  16. def register(request):
  17.  
  18. if request.method=="POST":
  19. form=UserForm(request.POST)
  20. if form.is_valid():
  21. print(form.cleaned_data) # 所有干净的字段以及对应的值
  22. else:
  23. print(form.cleaned_data) #
  24. print(form.errors) # ErrorDict : {"校验错误的字段":["错误信息",]}
  25. print(form.errors.get("name")) # ErrorList ["错误信息",]
  26. return HttpResponse("OK")
  27. form=UserForm()
  28. return render(request,"register.html",locals())

1,渲染标签功能

渲染方式1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  7. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  8. </head>
  9. <body>
  10. <h3>注册页面</h3>
  11. <div class="container">
  12. <div class="row">
  13. <div class="col-md-6 col-lg-offset-3">
  14.  
  15. <form action="" method="post">
  16. {% csrf_token %}
  17. <div>
  18. <label for="">用户名</label>
  19. {{ form.name }}
  20. </div>
  21. <div>
  22. <label for="">密码</label>
  23. {{ form.pwd }}
  24. </div>
  25. <div>
  26. <label for="">确认密码</label>
  27. {{ form.r_pwd }}
  28. </div>
  29. <div>
  30. <label for=""> 邮箱</label>
  31. {{ form.email }}
  32. </div>
  33.  
  34. <input type="submit" class="btn btn-default pull-right">
  35. </form>
  36. </div>
  37. </div>
  38. </div>
  39. </body>
  40. </html>

渲染方式2

  1. <form action="" method="post">
  2. {% csrf_token %}
  3.  
  4. {% for field in form %}
  5. <div>
  6. <label for="">{{ field.label }}</label>
  7. {{ field }}
  8. </div>
  9. {% endfor %}
  10. <input type="submit" class="btn btn-default pull-right">
  11.  
  12. </form>

渲染方式3

  1. <form action="" method="post">
  2. {% csrf_token %}
  3.  
  4. {{ form.as_p }}
  5. <input type="submit" class="btn btn-default pull-right">
  6.  
  7. </form>

2,显示错误与重置输入信息功能

视图

  1. def register(request):
  2.  
  3. if request.method=="POST":
  4. form=UserForm(request.POST)
  5. if form.is_valid():
  6. print(form.cleaned_data) # 所有干净的字段以及对应的值
  7. else:
  8. print(form.cleaned_data) #
  9. print(form.errors) # ErrorDict : {"校验错误的字段":["错误信息",]}
  10. print(form.errors.get("name")) # ErrorList ["错误信息",]
  11. return render(request,"register.html",locals())
  12. form=UserForm()
  13. return render(request,"register.html",locals())
  14.  

模板

  1. <form action="" method="post" novalidate>
  2. {% csrf_token %}
  3.  
  4. {% for field in form %}
  5. <div>
  6. <label for="">{{ field.label }}</label>
  7. {{ field }} <span class="pull-right" style="color: red">{{ field.errors.0 }}</span>
  8. </div>
  9. {% endfor %}
  10. <input type="submit" class="btn btn-default">
  11.  
  12. </form>

3,局部钩子与全局钩子

模板

  1. # forms组件
  2. from django.forms import widgets
  3.  
  4. wid_01=widgets.TextInput(attrs={"class":"form-control"})
  5. wid_02=widgets.PasswordInput(attrs={"class":"form-control"})
  6.  
  7. from django.core.exceptions import ValidationError
  8. class UserForm(forms.Form):
  9. name=forms.CharField(max_length=32,
  10. widget=wid_01
  11. )
  12. pwd=forms.CharField(max_length=32,widget=wid_02)
  13. r_pwd=forms.CharField(max_length=32,widget=wid_02)
  14. email=forms.EmailField(widget=wid_01)
  15. tel=forms.CharField(max_length=32,widget=wid_01)
  16.  
  17. # 局部钩子
  18. def clean_name(self):
  19. val=self.cleaned_data.get("name")
  20. if not val.isdigit():
  21. return val
  22. else:
  23. raise ValidationError("用户名不能是纯数字!")
  24.  
  25. # 全局钩子
  26.  
  27. def clean(self):
  28. pwd=self.cleaned_data.get("pwd")
  29. r_pwd=self.cleaned_data.get("r_pwd")
  30.  
  31. if pwd==r_pwd:
  32. return self.cleaned_data
  33. else:
  34. raise ValidationError('两次密码不一致!')
  35.  
  36. def register(request):
  37.  
  38. if request.method=="POST":
  39. form=UserForm(request.POST)
  40. if form.is_valid():
  41. print(form.cleaned_data) # 所有干净的字段以及对应的值
  42. else:
  43. clean_error=form.errors.get("__all__")
  44.  
  45. return render(request,"register.html",locals())
  46. form=UserForm()
  47. return render(request,"register.html",locals())

视图

  1. <form action="" method="post" novalidate>
  2. {% csrf_token %}
  3.  
  4. {% for field in form %}
  5. <div>
  6. <label for="">{{ field.label }}</label>
  7. {{ field }}
  8. <span class="pull-right" style="color: red">
  9. {% if field.label == 'R pwd' %}
  10. <span>{{ clean_error.0 }}</span>
  11. {% endif %}
  12. {{ field.errors.0 }}
  13. </span>
  14. </div>
  15. {% endfor %}
  16. <input type="submit" class="btn btn-default">
  17.  
  18. </form>

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号