首页 > 编程 > Python > 正文

Django中的forms组件实例详解

2020-02-15 23:35:15
字体:
来源:转载
供稿:网友

Form介绍

我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来。

与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入的长度和格式等正不正确。如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误信息.。

Django form组件就实现了上面所述的功能。

总结一下,其实form组件的主要功能如下:

生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容

先在应用目录下my_forms.py定义好一个UserForm类

from django import forms from django.forms import widgets    class UserForm(forms.Form):     username = forms.CharField(min_length=4, label='用户名',                   widget=widgets.TextInput(attrs={"class": "form-control"}),                   error_messages={                     "required": "用户名不能为空",                   })     pwd = forms.CharField(min_length=4, label='密码',                error_messages={                  "required": "密码不能为空",                },                widget=widgets.PasswordInput(attrs={"class": "form-control"}))     r_pwd = forms.CharField(min_length=4, label='确认密码',                 widget=widgets.PasswordInput(attrs={"class": "form-control"}),                 error_messages={                   "required": "密码不能为空",                 })     email = forms.EmailField(label='邮箱',                 widget=widgets.EmailInput(attrs={"class": "form-control"}),                 error_messages={                   "required": '邮箱不能为空',                   "invalid": "邮箱格式错误",                 })     tel = forms.CharField(label='手机号',                widget=widgets.TextInput(attrs={"class": "form-control"}),                )

再写一个视图函数:

  在写一个视图函数

   def reg(request):     form = UserForm()     if request.method == "POST":       print(request.POST)       # 实例化form对象的时候,把post提交过来的数据直接传进去       form = UserForm(request.POST) # form表单的name属性值应该与forms组件的字段名称一致       if form.is_valid():         print(form.cleaned_data)         return HttpResponse('注册成功')     return render(request, 'reg.html', locals())

login.html

  <!DOCTYPE html>   <html lang="zh_CN">   <head>     <meta charset="UTF-8">     <meta http-equiv="x-ua-compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>注册</title>   </head>   <body>   <h3>传统form表单</h3>   <form action="" method="post">     {% csrf_token %}     <p>用户名:<input type="text" name="username"></p>     <p>密码:<input type="password" name="pwd"></p>     <p>确认密码:<input type="password" name="r_pwd"></p>     <p>邮箱:<input type="email" name="email"></p>     <p>手机号:<input type="tel" name="tel"></p>     <p><input type="submit" value="提交"></p>   </form>   <h3>forms组件渲染方式1</h3>   <form action="" method="post" novalidate>     {% csrf_token %}     <p>{{ form.username.label }}:{{ form.username }} <span>{{ form.username.errors.0 }}</span></p>     <p>密码:{{ form.pwd }}       <span>{{ form.pwd.errors.0 }}</span></p>     <p>确认密码:{{ form.r_pwd }}       <span>{{ form.r_pwd.errors.0 }}</span></p>     <p>邮箱:{{ form.email }}       <span>{{ form.email.errors.0 }}</span></p>     <p>手机号:{{ form.tel }}       <span>{{ form.tel.errors.0 }}</span></p>     <p><input type="submit" value="提交"></p>   </form>   <h3>forms组件渲染标签方式2</h3>     <form action="" method="post" novalidate>       {% csrf_token %}       {% for field in form %}         <div class="form-group clearfix">           <label for="">{{ field.label }}</label>           {{ field }}           <span style="color: red" class="pull-right">{{ field.errors.0 }}</span>           {% if field.name == 'r_pwd' %}             <span style="color: red" class="pull-right">{{ errors.0 }}</span>           {% endif %}         </div>       {% endfor %}       <input type="submit" value="注册" class="btn btn-default pull-right">     </form>   <h3>forms组件渲染标签方式3  不推荐使用</h3>   <form action="" method="post">     {% csrf_token %}     {{ form.as_p }}     <input type="submit" value="注册">   </form>   </body>   </html>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表