|
|
# form组件前戏推导
前戏
写一个注册功能
获取用户名和密码，利用form表单提交数据
在后端判断用户名和密码是否符合一定的条件
用户名不能含有金瓶梅
密码不能少于3位
如何符合条件 需要你将提示信息展示到前端页面
[后端校验数据、并发送提示信息]
def ab_form(request):
back_dic = {'username':'','password':''}
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
if '金瓶梅' in username:
back_dic['username']='这不好不符合社会主义价值观'
if len(password)<3:
back_dic['password']='不能太短'
"""
无论是post请求还是get请求
页面都能获取到字典 只不过get请求来的时候 字典都是空的
而post请求来之后 字典可能有值
"""
return render(request,'ab_form.html',locals())
[前端渲染HTML页面]
<form action=""method="post">
<p>username<input type="text" name="username"><span style="color:red;">{{ back_dic.username }}</span></p>
<p>password<input type="text" name="password"><span style="color:red;">{{ back_dic.password }}</span></p>
<input type="submit" class="btn btn-info">
</form>
[总结]
1.手动书写前端获取用用户的html代码 渲染html代码
2.后端对用户数据进行校验 校验数据
3.对不符合要求的数据进行展示提示 展示提示信息
# forms组件正题
能够完成的事情
1.渲染html代码
2.校验数据
3.展示提示信息
为什么数据校验非要去后端 不能在前端利用js直接完成呢？
数据校验全段可有可无
但是后端必须要有！！！
因为前端的校验是若不惊风 你可以直接修改
或者利用爬虫程序绕过前端页面直接朝后端提交数据
比如购物网站
选好货品之后 会计算一个价格发送给后端 如果后端不做价格校验可能出现首付款不一样
但实际怎么做校验呢？
获取到用户选择所有商品的主键值
然后后端查询出所有商品的价格 再次计算一次
如果和前端一致 那么完成支付不一致则拒绝
# 1、后端如何校验数据
from django import forms
class MyForm(forms.Form):
# username字符类型最大8位，最小3位
username = forms.CharField(min_length=3,max_length=8)
# password字符类型最大8位，最小3位
password = forms.CharField(min_length=3,max_length=8)
# email字符类型必须符合xx@xx.com
email = forms.EmailField()
[校验数据]
1.测试环境的准备 可以自己拷贝代码准备
2.其实在pycharm里面已经帮你准备一个测试环境
python console
from app01 import models
from app01 import views
[1.将带校验的数据组织成字典的形式传入]
form_obj = views.MyForm({'username':'jason','password':123,'email':'123'})
[2.判断数据是否合法 注意该方法只有在所有数据都是合法的时候才会返回True]
form_obj.is_valid()
False
[3.查看所有校验通过的数据]
form_obj.cleaned_data
{'username': 'jason', 'password': '123'}
[4.查看所有不符合校验规则以及不符合的原因]
form_obj.errors
{'email': ['Enter a valid email address.']} # 报错原因是用列表形式的，说明校验规则和犯错规则不止一个
[5.校验规则只校验这个出现的字段 多穿不影响 字段直接忽略]
form_obj = views.MyForm({'username':'jason','password':123,'email':'123@qq.com','hobby':'read'})
True
[6.校验规则默认情况下，不能少穿，但是也可以改]
form_obj = views.MyForm({'username':'jason','password':123})
False
[校验规则:默认情况下可以多穿，但是不能少传
# 2、渲染HTML标签
form组件只会给你渲染获取用户输入的标签(input,select,radio,checkbox)，不会渲染提交按钮标签
[后端]
def index(request):
# 1 先产生一个空对象
form_obj=MyForm()
# 2 直接将空对象传递给html页面
return render(request,'index.html',locals())
[前端:利用空对象对其属性进行操作
<body>
<form action=""method="post">
<p>第一种渲染方式:代码书写极少，封装程度太高了，不便于后期扩展，一般本地测试使用</p>
{{ form_obj.as_p }}
{{ form_obj.as_ul }}
{{ form_obj.as_table }}
<p>第二种渲染方式: 可扩展性很强，但是需要书写的代码过多，一般情况下不用</p>
<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>
{% for form in form_obj %}
<p>{{ form.label }}:{{ form }}</p>
{% endfor %}
</form>
</body>
[label]默认展示的是类中定义的字段首字母大写形式
也可以默认自己修改，直接给字典对象加label属性即可
username = forms.CharField(min_length=3,max_length=8,label='用户名')
# 3、展示提示信息
浏览器会自动帮你校验数据 但是前端的校验若不惊风
如何让浏览器不做校验呢
[后端]
def index(request):
# 1 先产生一个空对象
form_obj=MyForm()
# 2 直接将空对象传递给html页面
if request.method == 'POST':
# 3 校验数据
form_obj=MyForm(request.POST)# request.POST相当于是一个字典
# 4 如果合法 操作数据库存储数据
if form_obj.is_valid():
return HttpResponse('ok')
# 5 不合法有错误
return render(request,'index.html',locals())
[前端]
<form action=""method="post" novalidate>
{% 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>
[如何让前端的数据在提交校验时候保存数据]
1.必备条件 get请求和post传给html页面对象变量名必须一样
2.form组件当你的数据不合法的情况下 会保存你上次的数据 让你基于之前那的结果进行修改
更加人性化
[针对错误的提示信息也可以自己定制]
class MyForm(forms.Form):
# username字符类型最大8位，最小3位
username = forms.CharField(min_length=3,max_length=8,label='用户名',
error_messages={
'min_length':'最少三位',
'max_length':'最大八位',
'required':'账号不能为空',
})
# password字符类型最大8位，最小3位
password = forms.CharField(min_length=3,max_length=8,label='密码',
error_messages={
'min_length': '最少三位',
'max_length': '最大八位',
'required': '密码不能为空',
})
# email字符类型必须符合xx@xx.com
email = forms.EmailField(label='邮箱',
error_messages={
'invalid': '邮箱格式不正确',
'required': '邮箱不能为空',
})
# 钩子函数(hook)
在特定的节点自动触发完成相应的操作
钩子函数在form组件中就类似与第二道关卡，能够让我们自定义校验规则
在form组件中有两类钩子
1.局部钩子
当你需要给单个字段增加校验规则时候使用
2.全部钩子
当你需要给多个字段增加校验规则时候使用
实际案例
1.校验用户名不能含有666 只是校验username字段 局部钩子
2.校验密码和确认密码是否一致 password和confirm两个字段 全局钩子
# 钩子函数 在类里面书写方法即可
# 局部钩子
def clean_username(self):
# 获取用户名
username = self.cleaned_data.get('username')
if '666' in username:
# 提示当前错误信息
self.add_error('username','光喊666是不行的')
# 将钩子函数勾出来的数据放回去
return username
# 全局钩子
def clean(self):
# 获取密码和确认密码
password =self.cleaned_data.get('password')
confirm_password =self.cleaned_data.get('confirm_password')
# 判断两次密码是否一致
if password != confirm_password:
self.add_error('confirm_password','两次密码不一致')
# 再将数据放回去
return self.cleaned_data
# forms组件其他参数及补充知识点
label 字段名
error_messages 自定义报错信息
initial 默认值
required 控制字段是否必填
1、字段没有样式
2、针对不同的类型的input如何修改
password
data
radio
checkbox
widget=forms.widgets.TextInput(attrs={'class':'form-control c1 c2'})
[多个属性值直接空格隔开就好，想html操作加上bootstrap操作一样的]
[正则校验]
phone=forms.CharField(
validators=[RegexValidator(r'^[0-9]+$', '请输入数字'),
RegexValidator(r'^159[0-9]+$', '数字必须以159开头')
],)
[规律总结]
1、针对选择框，单选是ChoiceField，多选是SelectMultiple
2、widgets后点什么就是form表单中的type类型
eg：
# radio
gender = forms.fields.ChoiceField(
choices=((1, "男"), (2, "女"), (3, "保密")),
label="性别",
initial=3,# 默认值
widget=forms.widgets.RadioSelect()
)
# select下拉框
hobby = forms.ChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
label="爱好",
initial=3,
widget=forms.widgets.Select()
)
# select 下拉框多选
hobby1 = forms.ChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
label="爱好",
initial=3,
widget=forms.widgets.SelectMultiple()
)
# checkbox单选
keep = forms.ChoiceField(
label="是否记住密码",
initial="checked",
widget=forms.widgets.CheckboxInput()
)
# checkbox多选
keep1 = forms.ChoiceField(
label="是否记住密码",
initial="checked",
widget=forms.widgets.CheckboxSelectMultiple()
)
# 后端代码from django.shortcuts import render,HttpResponse
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
# Create your views here.
def ab_form(request):
back_dic = {'username':'','password':''} # 提前写好的全局标志位,用于替换数据
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
if '金瓶梅' in username:
back_dic['username']='这不好不符合社会主义价值观'
if len(password)<3:
back_dic['password']='不能太短'
"""
无论是post请求还是get请求
页面都能获取到字典 只不过get请求来的时候 字典都是空的
而post请求来之后 字典可能有值
"""
return render(request,'ab_form.html',locals())
from django import forms
from django.core.validators import RegexValidator
class MyForm(forms.Form):
# username字符类型最大8位，最小3位
username = forms.CharField(min_length=3,max_length=8,label='用户名',initial='jason',required=False,
error_messages={
'min_length':'最少三位',
'max_length':'最大八位',
'required':'账号不能为空',
},
widget=forms.widgets.TextInput(attrs={'class':'form-control c1 c2'})
)
# password字符类型最大8位，最小3位
password = forms.CharField(min_length=3,max_length=8,label='密码',
error_messages={
'min_length': '最少三位',
'max_length': '最大八位',
'required': '密码不能为空',
},
widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
)
confirm_password = forms.CharField(min_length=3, max_length=8, label='确认密码',
error_messages={
'min_length': '确认密码最少三位',
'max_length': '确认密码最大八位',
'required': '确认密码密码不能为空',
},
widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
)
# email字符类型必须符合xx@xx.com
email = forms.EmailField(label='邮箱',
error_messages={
'invalid': '邮箱格式不正确',
'required': '邮箱不能为空',
},
widget=forms.widgets.EmailInput(attrs={'class':'form-control'})
)
# 正则
phone=forms.CharField(
validators=[RegexValidator(r'^[0-9]+$', '请输入数字'),
RegexValidator(r'^159[0-9]+$', '数字必须以159开头')
],)
# radio
gender = forms.fields.ChoiceField(
choices=((1, "男"), (2, "女"), (3, "保密")),
label="性别",
initial=3,# 默认值
widget=forms.widgets.RadioSelect()
)
# select下拉框
hobby = forms.ChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
label="爱好",
initial=3,
widget=forms.widgets.Select()
)
# select 下拉框多选
hobby1 = forms.ChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
label="爱好",
initial=3,
widget=forms.widgets.SelectMultiple()
)
# checkbox单选
keep = forms.ChoiceField(
label="是否记住密码",
initial="checked",
widget=forms.widgets.CheckboxInput()
)
# checkbox多选
keep1 = forms.ChoiceField(
label="是否记住密码",
initial="checked",
widget=forms.widgets.CheckboxSelectMultiple()
)
# 钩子函数
# 局部钩子
def clean_username(self):
# 获取用户名
username = self.cleaned_data.get('username')
if '666' in username:
# 提示当前错误信息
# 报错方式一
# self.add_error('username','光喊666是不行的')
# 报错方式二 较为繁琐一般不用了解即可
raise ValidationError('光喊666是不行的')
# 将钩子函数勾出来的数据放回去
return username
# 全局钩子
def clean(self):
# 获取密码和确认密码
password =self.cleaned_data.get('password')
confirm_password =self.cleaned_data.get('confirm_password')
# 判断两次密码是否一致
if password != confirm_password:
self.add_error('confirm_password','两次密码不一致')
# 再将数据放回去
return self.cleaned_data
def index(request):
# 1 先产生一个空对象
form_obj=MyForm()
# 2 直接将空对象传递给html页面
if request.method == 'POST':
# 3 校验数据
form_obj=MyForm(request.POST)# request.POST相当于是一个字典
# 4 如果合法 操作数据库存储数据
if form_obj.is_valid():
return HttpResponse('ok')
# 5 不合法有错误
return render(request,'index.html',locals())
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2022-10-18 00:13:53
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡