django框架提供了一个form类,来处理web开发中的表单相关事项。众所周知,form最常做的是对用户输入的内容进行验证,为此django的forms类提供了全面的内容验证和保留用户上次输入数据的支持。
form组件有2大大功能
对用户提交的内容进行验证(from表单/Ajax)
保留用户上次输入的内容
form组件验证的流程
form表单提交验证
form表单(会发起 get)提交刷新失去上次内容
from django.shortcuts import render,HttpResponse,redirect
from django.forms import Form
from django.forms import fields
class Login(Form):
#from验证规则 用户名 6-10字符 required不能为空
name=fields.CharField(max_length=10,
min_length=6,
required=True,
error_messages={
'required':'用户名不能为空', #error_messages参数 自定义错误信息
'min_length':'太短了',
'max_length': "太长了",
}
)
# z注意name 必须和 from表单提交的一致,要么二则怎么对比校验呢
pwd= fields.CharField(min_length=3,
required=True,
error_messages={
'required': '密码不能为空', # error_messages参数 自定义错误信息
'min_length': '太短了',
'max_length': "太长了",
}
)
def index(request):
if request.method=='GET':
return render(request,'login.html')
else:
obj=Login(request.POST) #把客户端提交来的form表单和 和匹配规则放在一起
res=obj.is_valid() #自动校验 给出结果 True 或者 False
if res: #验证成功后obj.cleaned_data获取成功的数据,字典类型正好对应数据 的批量操作
print(obj.cleaned_data)
return redirect('http://www.baidu.com') #obj.errors获取错误信息(对象类型)就可以传到前端显示了!
else:
return render(request,'login.html',{'obj':obj})
Aja提交验证
Ajax不会刷新,上次输入内容自动保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajx提交</title>
</head>
<body>
<form method="post" action="/aja_login/" id="f1">
{%csrf_token%}
<p>用户:<input type="text" name="name"></p>
<p>密码:<input type="password" name="pwd"></p>
<p><input type="button" onclick="Ajxform()" value="aja提交"></p>
</form>
</body>
<script src="/static/zhanggen.js"></script>
<script> function Ajxform(){
$('.c1').remove()
$.ajax({
url:'/alogin/',
type:'POST',
dataType:'JSON',
data:$('#f1').serialize(),
success:function (args) {
if (args.status){ }
else{
{# {status: false, msg: Object}#}
{# console.log(args);#}
{# Jquery循环服务端 传过来的 错误信息对象#}
$.each(args.msg,function (index,value) {
console.log(index,value);
{# index----> name ["太短了"]#}
{# value-----pwd["密码不能为空"]#}
var tag=document.createElement('span');
tag.innerHTML= value[0];
tag.className='c1';
console.log(index);
{# 寻找input下 属性为 name 和pwd的标签(字符串拼接) 在他们后半加 上tag标签也就是错误 信息 #}
$('#f1').find('input[name="'+ index +'"]').after(tag)
})
}
}})}
</script>
</html>
views
from django.shortcuts import render,HttpResponse,redirect
from django.forms import Form
from django.forms import fields
import json
class Login(Form):
#from验证规则 用户名 6-10字符 required不能为空
name=fields.CharField(max_length=10,
min_length=6,
required=True,
error_messages={
'required':'用户名不能为空', #error_messages参数 自定义错误信息
'min_length':'太短了',
'max_length': "太长了",
}
)
# z注意name 必须和 from表单提交的一致,要么二则怎么对比校验呢
pwd= fields.CharField(min_length=3,
required=True,
error_messages={
'required': '密码不能为空', # error_messages参数 自定义错误信息
'min_length': '太短了',
'max_length': "太长了",})
def agx_login(request):
ret={'status':True,'msg':None}
if request.method=='GET':
return render(request,'ajalogin.html')
else:
obj=Login(request.POST)
ret['status']=False
ret['msg']=obj.errors
return HttpResponse(json.dumps(ret))
动态生成HTML标签,保留用户上次输入的内容
如何保留用户上次输入的内容?
由于form表单submit之后(发送post请求) 数据提交到 后端,不管前端输入的数据是否正确,服务端也要响应,所以页面会刷新;
所以无法保留用户上次输入的内容;如何解决呢?
保留用户上次输入的内容 是利用了 obj=Login(request.POST)接收了用户输入的值
承上启下 form组件的套路(执行流程):
(1)在后端定义类和字段,实例化Form类;
(2)到用户 发送get请求时,服务端渲染到模板(空标签/默认值)发送到客户端显示
(3)客户端填数据,POST提交到后端;
(4)后端验证,返回结果给前端;(切记Form组件是在后端生成,发送给客户端显示,客户端填完数据在发回服务端!)