Django--Forms组件使用
Forms组件的使用
在html表单验证中，需要通过各种信息的验证，比如注册界面的姓名、密码、邮箱、电话等的验证，是否符合定义好的规则，不可能每次都要取出对应的字段一一判断，django内置了Forms组件，可以方便的在HTML中进行校验等信息设置
1.Forms组件的作用
1.数据校验
2.渲染页面
3.渲染错误信息
4.使用局部或者全局的钩子函数
5.设置CSS样式
2.Forms组件的使用
- 1.导入froms模块
from django import forms - 2.定义一个类继承自forms.Form,编写校验的字段,该字段就是html页面上提交数据上传的字段
class RegisterForms(Form):
# 添加的字段类型中的属性，每个子类都继承自field，
#field中对应的属性和释义
#required=True, 是否是必须验证,默认为True
#widget=None, HTML插件，添加类名，设置placeholder等等
#label=None, 用于生成Label标签或显示内容
#initial=None, 初始值
#help_text='', 帮助信息(在标签旁边显示)
#error_messages=None, 错误信息 {'required': '不能为空', 'invalid': '格式错误'}
#validators=[], 自定义验证规则
#localize=False, 是否支持本地化
#disabled=False, 是否可以编辑
#label_suffix=None Label内容后缀
name = forms.CharField(min_length=3,max_length=8,
label="用户名",
error_messages={'min_length':'用户名最少为3位',
'max_length':'用户名最多8位',
'required':'名称不能为空'})
pwd = forms.CharField(min_length=6, max_length=20,
label='请输入密码',
error_messages={'min_length':'密码最少为6位',
'max_length':'密码最多20位',
'required':'密码不能为空'})
re_pwd = forms.CharField(min_length=6, max_length=20,
label='请确认密码',
error_messages={'min_length':'密码最少为6位',
'max_length':'密码最多20位',
'required':'密码不能为空'})
phone = forms.CharField(label="请输入手机号码",
error_messages={'placerholder': '请输入手机号码'})
email = forms.EmailField(label='请输入邮箱',required=False,
error_messages={'invalid':'邮箱格式不合法',
'max_length':'密码最多20位'})
# 对于多传的字段不会出错，cleaned_data中不包含多传的字段
# 少传的字段会报错，相当于对应的字段没有值
- 3.在对应的views视图中进行校验,
def form_index(request):
post_forms = RegisterForms()
error = ''
if request.method == 'POST':
post_forms = RegisterForms(request.POST)
# 4 调用forms的is_valid方法，完成校验，is_valid返回true或者false
if post_forms():
register = post_forms.cleaned_data
print(register)
return HttpResponse('注册成功')
else:
from django.forms.utils import ErrorDict
# 获取全局的error信息,只显示第一个
if post_forms.errors.get('__all__'):
error = post_forms.errors.get('__all__')[0]
return render(request, 'FormsTest/forms_index.html',locals())
- 4.通过模板渲染,渲染模板有如下几种方式，具体使用如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>forms登录</title>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<script src="{% static 'jquery-3.3.1.js' %}"></script>
<style>
.edit-author{
margin: 100px 300px;
}
.errorinfo{
color: red;
font-size: 15px;
padding-left: 15px;
}
</style>
</head>
<body>
<div class="edit-author">
{# <form action="" method="post">#}
{# {% csrf_token %}#}
{# <div class="form-group">#}
{# <label for="exampleInputEmail1">用户名</label>#}
{# <input type="text" name="name" class="form-control" placeholder="请输入用户名" >#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">密码</label>#}
{# <input type="password" name="pwd" class="form-control" placeholder="请输入密码">#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">确认密码</label>#}
{# <input type="password" name="re_pwd" class="form-control" placeholder="请确认密码">#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">邮箱</label>#}
{# <input type="email" name="email" class="form-control" placeholder="请输入邮箱">#}
{# </div>#}
{##}
{# <button type="submit" id="clickBtn" class="btn btn-default submit-button">注册</button>#}
{# <span id="error"></span>#}
{# </form>#}
{# forms渲染页面第一种方式#}
{# <form action="" method="post">#}
{# {% csrf_token %}#}
{# <div class="form-group">#}
{# <label for="exampleInputEmail1">用户名</label>#}
{# {{ post_forms.name }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">密码</label>#}
{# {{ post_forms.pwd }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">确认密码</label>#}
{# {{ post_forms.re_pwd }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="exampleInputPassword1">邮箱</label>#}
{# {{ post_forms.email }}#}
{# </div>#}
{# <button type="submit" id="clickBtn" class="btn btn-default submit-button">注册</button>#}
{# </form>#}
{# forms渲染页面第二种方式，推荐使用#}
<form action="" method="post" novalidate>
{% csrf_token %}
{% for foo in reg_forms %}
<div class="form-group">
{# errors是一个列表，一般取第一个就可以了，这样不会换行处理#}
<label for="exampleInputEmail1">{{ foo.label }}</label>
<span class="errorinfo"> {{ foo.errors.0 }}</span>
{{ foo }}
</div>
{% endfor %}
<button type="submit" id="clickBtn" class="btn btn-default submit-button">注册</button>
<span class="errorinfo">{{ error }} </span>
</form>
{# forms渲染页面第二种方式,不推荐使用#}
{# <form action="" method="post">#}
{# {% csrf_token %}#}
{# {{ post_forms.as_p }}#}
{# {{ post_forms.as_ul }}#}
{# {{ post_forms.as_table }}#}
{# <button type="submit" id="clickBtn" class="btn btn-default submit-button">注册</button>#}
{# </form>#}
</div>
</body>
</html>
- 5.上面只是实现了部分的校验，而且展示的样式需要手动渲染，我们可以在定义模型的时候直接设置好对应的css展示样式和自定义校验规则，比如电话号码的正则校验等等
#导入widgets模块，设置css的展示样式
from django.forms import widgets
#接下来修改对应的name，pwd，phone等字段，添加新属性，如下添加了占位符和类名这个时候的登录界面就和上面的一样
name = forms.CharField(min_length=3,max_length=8,
label="用户名",
widget=widgets.TextInput(attrs={'class': 'form-control',
'placeholder': '请输入名称(3-8字符)'}),
error_messages={'min_length':'用户名最少为3位',
'max_length':'用户名最多8位',
'required':'名称不能为空'})
pwd = forms.CharField(min_length=6, max_length=20,
label='请输入密码',
widget=widgets.PasswordInput(attrs={'class':'form-control',
'placeholder':'请输入密码(6-20字符)'}),
error_messages={'min_length':'密码最少为6位',
'max_length':'密码最多20位',
'required':'密码不能为空'})
re_pwd = forms.CharField(min_length=6, max_length=20,
label='请确认密码',
widget=widgets.PasswordInput(attrs={'class': 'form-control',
'placeholder': '请确认密码'}),
error_messages={'min_length':'密码最少为6位',
'max_length':'密码最多20位',
'required':'密码不能为空'})
phone = forms.CharField(label="请输入手机号码",
widget=widgets.TextInput(attrs={'class': 'form-control',
'placeholder': '请输入手机号码'}),
error_messages={'placerholder': '请输入手机号码'})
email = forms.EmailField(label='请输入邮箱',required=False,
widget=widgets.TextInput(attrs={'class': 'form-control',
'placeholder': '请输入邮箱'}),
error_messages={'invalid':'邮箱格式不合法',
'max_length':'密码最多20位'})
- 6.自定义校验规则，有时django自带的校验并不能满足我们所有的需求，比如校验密码输入，不能用特殊字符，手机号码格式定义正则等，这就需要我们自定义规则
#自定义校验规则
def mobile_validate(value):
mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')
if not mobile_re.match(value):
raise ValidationError('手机号码格式错误')
#在定义字段的时候添加校验规则,校验规则传入的是一个列表，可以有多个校验规则
phone = forms.CharField(label="请输入手机号码",
validators=[mobile_validate,],
widget=widgets.TextInput(attrs={'class': 'form-control',
'placeholder': '请输入手机号码'}),
error_messages={'placerholder': '请输入手机号码'})
- 7.自定义钩子，实现自定义的错误提示和校验规则,
#Django中钩子分为局部钩子和全局钩子，
# 局部钩子函数(某个字段，自定义的规则，数据库是否存在，以什么开头)
# 方法名必须为:clean_字段名
def clean_name(self):
#获取到当前对象，是cleaned_data之后的数据
name = self.cleaned_data.get('name')
if name.startswith('sb'):
#以sb开头了返回错误信息,禁止使用sb开头的用户名
raise ValidationError('不能以sb开头')
# 数据库中查询有没有这个名称
user = models.UserInfo.objects.filter(username=name).first()
if user:
raise ValidationError('用户名已存在')
return name
#全局钩子，方法名必须是clean
#校验两次密码是否相同等，
def clean(self):
pwd = self.cleaned_data.get('pwd')
re_pwd = self.cleaned_data.get('re_pwd')
if pwd == re_pwd:
return self.cleaned_data
else:
raise ValidationError('两次密码不一致')
3.最后实现的效果如下图
握不住的沙，干脆扬了它。
