一、form是组件
后端代码
from django.shortcuts import render, redirect, HttpResponse
def ab_form(request):
back_dict = {'username': '', 'password': ''}
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
if '金瓶梅' in username:
back_dict['username'] = '不符合规范'
if len(password) < 3 and len(password) > 20:
back_dict['password'] = '密码的长度只能介于3位到20位的区间'
return render(request, 'ab_form.html', locals())
from django import forms
class MyForm(forms.Form):
username = forms.CharField(min_length=3, max_length=8, label='用户名',
error_messages={
'min_length': '用户名最少3位',
'max_length': '用户名最大8位',
'required': '用户名不能为空',
})
password = forms.CharField(min_length=3, max_length=8, label='密码',
error_messages={
'min_length': '密码最少3位',
'max_length': '密码最大8位',
'required': '密码不能为空',
})
confirm_password = forms.CharField(min_length=3, max_length=8, label='确认密码',
error_messages={
'min_length': '确认密码最少3位',
'max_length': '确认密码最大8位',
'required': '确认密码不能为空',
})
# email字段必须符合邮箱格式:xxx@xx.com
email = forms.EmailField(label='邮箱',
error_messages={
'invalid': '邮箱格式不正确',
'required': '密码不能为空',
})
'''
form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
# 校验数据是否合法
form_obj.is_valid() False
form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': 'xx@123.com'})
form_obj.is_valid() True
# 校验合法的数据有哪些
form_obj.cleaned_data
{'username': 'json', 'password': '123', 'email': 'xx@123.com'}
form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
form_obj.is_valid() False
form_obj.cleaned_data
{'username': 'json', 'password': '123'}
# 把不合法的数据找出来
form_obj.errors {'email': ['输入一个有效的 Email 地址。']}
form_obj = views.MyForm({'username': 'json', 'password': 123})
form_obj.is_valid() False
form_obj.errors
{'email': ['这个字段是必填项。']}
'''
# 局部钩子
def clean_username(self):
# 获取到用户名
username = self.cleaned_data.get('username')
if '666' in username:
# 提示前端展示错误信息
self.add_error('username', '只含有666不行')
# 将钩子函数钩取出来的数据再放回去
return username
# 全局钩子
def clean_password(self):
# 获取密码和确认密码
password = self.cleaned_data.get('password')
confirm_password = self.cleaned_data.get('confirm_password')
if not confirm_password == password:
self.add_error('confirm_password', '两次密码不一致')
# 将钩子函数钩取出来的数据再放回去
return self.cleaned_data
'''
钩子函数(HOOK):在特定的节点自动触发完成响应的操作
在forms组件中有两类钩子
1.局部钩子:
当你需要给单个字段增加校验规则的时候可以使用
2.全局钩子:
当你需要给多个字段增加校验规则的时候可以使用
案例:
1.校验用户名中不能含有666 只是校验username字段,局部钩子
2.校验密码和确认密码是否一致 password和confirm两个字段 全局钩子
'''
def index(request):
# 1.先产生一个空对象
# 里面的label属性默认展示的是类中定义的字段首字母大写的形式,
# 也可以自行修改,如:label='用户名'
form_obj = MyForm()
if request.method == 'POST':
# 获取用户数据并且校验
'''
1.获取数据繁琐
2.校验数据需要构造成字典的格式传入才行
PS:但是 request.POST 可以看成是一个字典
'''
# 3.校验数据
form_obj = MyForm(request.POST)
# 4.判断数据是否合法
if form_obj.is_valid():
# 5.若合法,操作数据库,存储数据
return HttpResponse('OK')
# 不合法,如何将错误信息展示到前端?
# 2.直接将该空对象传递给html页面
return render(request, 'index.html', locals())
2.前端值index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'js/jquery.min.js' %}"></script>
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'layer/layer.js' %}"></script>
</head>
<body>
<form action="" method="post" novalidate>
<p>第一种页面渲染方式: 代码书写少,封装程度太高了,不便于后续的扩展,一般只在本地测试使用</p>
{# {{ form_obj.as_p }}#}
<p>第二种页面渲染方式:可扩展性很强,但是需要书写的代码太多,一般情况下不用</p>
{# {{ form_obj.as_ul }}#}
{# <p>{{ form_obj.username.label }}:{{ form_obj.username }}</p>#}
{# <p>{{ form_obj.password.label }}:{{ form_obj.password }}</p>#}
{# <p>{{ form_obj.email.label }}:{{ form_obj.email }}</p>#}
<p>第三种页面渲染方式(推荐使用):代码书写简单,并且扩展性高</p>
{# {{ form_obj.as_table }}#}
{% for form in form_obj %}
<p>
{{ form.label }}:{{ form}}
<span style="color: red">{{ form.errors.0 }}</span>
</p>
{% endfor %}
<input type="submit" class="btn btn-info">
</form>
</body>
</html>
3.前端之ab_form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'js/jquery.min.js' %}"></script>
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'layer/layer.js' %}"></script>
</head>
<body>
<form action="" method="post">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p>username :
<input type="text" name="username">
<span style="color: darkred">{{ back_dict.username }}</span>
</p>
<p>password:
<input type="password" name="password">
<span style="color: darkred">{{ back_dict.password }}</span>
</p>
<input type="submit" class="btn btn-info">
</div>
</div>
</div>
</form>
</body>
</html>
4.form组件的参数以及单选多选形式
class MyForm(forms.Form):
username = forms.CharField(min_length=3, max_length=8,
label='用户名',
initial='lin',
required=False,
error_messages={
'min_length': '用户名最少3位',
'max_length': '用户名最大8位',
'required': '用户名不能为空',
},
widget=forms.widgets.TextInput(attrs={'class': 'form-control', 'username': 'lin'})
)
password = forms.CharField(min_length=3, max_length=8, label='密码',
error_messages={
'min_length': '密码最少3位',
'max_length': '密码最大8位',
'required': '密码不能为空',
},
widget=forms.widgets.PasswordInput()
)
confirm_password = forms.CharField(min_length=3, max_length=8, label='确认密码',
error_messages={
'min_length': '确认密码最少3位',
'max_length': '确认密码最大8位',
'required': '确认密码不能为空',
},
widget=forms.widgets.PasswordInput()
)
# email字段必须符合邮箱格式:xxx@xx.com
email = forms.EmailField(label='邮箱',
error_messages={
'invalid': '邮箱格式不正确',
'required': '密码不能为空',
},
widget=forms.widgets.EmailInput()
)
# 还支持正则校验
phone = forms.CharField(
validators=[
RegexValidator(r'^[0-9]+$', '请输入数字'),
RegexValidator(r'^159[0-9]+$', '数字必须以159开头')
],
)
# 选择
gender = forms.ChoiceField(
choices=((1, '男'), (2, '女'), (3, '保密')),
label='性别',
initial=3,
widget=forms.widgets.RadioSelect()
)
# 多选
hobby = forms.ChoiceField(
choices=((1, '篮球'), (2, '足球'), (3, '双色球')),
label='爱好',
initial=3,
widget=forms.widgets.Select()
)
# 多选
hobby1 = forms.MultipleChoiceField(
choices=((1, '篮球'), (2, '足球'), (3, '双色球')),
label='爱好',
initial=[1, 3],
widget=forms.widgets.SelectMultiple()
)
# 单选checkbox
keep = forms.ChoiceField(
label='是否记住密码',
initial='checked',
widget=forms.widgets.CheckboxInput()
)
# 多选checkbox
hobby2 = forms.MultipleChoiceField(
choices=((1, '篮球'), (2, '足球'), (3, '双色球')),
label='爱好',
initial=[1, 3],
widget=forms.widgets.CheckboxSelectMultiple()
)
'''
forms组件其他参数及补充知识点:
label 字段名
error_messages 自定义报错信息
invalid 邮箱格式提示信息
initial 设置默认值
required 控制字段是否必填
字段没有样式:
针对不同类型的input如何修改?
通过 widget
如:
widget=forms.widgets.TextInput()
widget=forms.widgets.TextInput(attrs={'class': 'form-control', 'username': 'lin'})
注意:需要什么样式,自行添加, 若是多个属性值,直接空格隔开即可
widget=forms.widgets.PasswordInput()
widget=forms.widgets.EmailInput()
text
password
date
radio
checkbox
...
'''
'''
form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
# 校验数据是否合法
form_obj.is_valid() False
form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': 'xx@123.com'})
form_obj.is_valid() True
# 校验合法的数据有哪些
form_obj.cleaned_data
{'username': 'json', 'password': '123', 'email': 'xx@123.com'}
form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
form_obj.is_valid() False
form_obj.cleaned_data
{'username': 'json', 'password': '123'}
# 把不合法的数据找出来
form_obj.errors {'email': ['输入一个有效的 Email 地址。']}
form_obj = views.MyForm({'username': 'json', 'password': 123})
form_obj.is_valid() False
form_obj.errors
{'email': ['这个字段是必填项。']}
'''
# 局部钩子
def clean_username(self):
# 获取到用户名
username = self.cleaned_data.get('username')
if '666' in username:
# 提示前端展示错误信息
self.add_error('username', '只含有666不行')
# 将钩子函数钩取出来的数据再放回去
return username
# 全局钩子
def clean_password(self):
# 获取密码和确认密码
password = self.cleaned_data.get('password')
confirm_password = self.cleaned_data.get('confirm_password')
if not confirm_password == password:
self.add_error('confirm_password', '两次密码不一致')
# 将钩子函数钩取出来的数据再放回去
return self.cleaned_data
'''
钩子函数(HOOK):在特定的节点自动触发完成响应的操作
在forms组件中有两类钩子
1.局部钩子:
当你需要给单个字段增加校验规则的时候可以使用
2.全局钩子:
当你需要给多个字段增加校验规则的时候可以使用
案例:
1.校验用户名中不能含有666 只是校验username字段,局部钩子
2.校验密码和确认密码是否一致 password和confirm两个字段 全局钩子
'''
文章来源地址https://www.toymoban.com/news/detail-677406.html
文章来源:https://www.toymoban.com/news/detail-677406.html
到了这里,关于forms组件(钩子函数(局部钩子、全局钩子)、三种页面的渲染方式、数据校验的使用)、form组件的参数以及单选多选形式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!