功能
- 用户数据提交进行验证
- Form提交：提交后，内容会清空，会刷新浏览器
1、通过写类（继承Forms）
字段名 == xx.filed（）这个字段本质就是验证正则，正则表达式
字段名 == xx.filed（）这个字段本质就是验证正则，正则表达式
字段名 == xx.filed（）这个字段本质就是验证正则，正则表达式
2、obj = logForm(request.post)
3、obj.is_valid()
4、obj.cleaned_data
5、obj.errors
- Ajax：提交后，会保留上次内容，不会刷新浏览器（如需需要手动操作）
- 保留上次内容is_valid的原理
from django.forms import Form,fields
class LoginFrom(Form):
username = fields.CharField(min_length=6,max_length=12,required=True,
error_messages={
‘required‘:‘用户不能为空‘,
‘min_length‘:‘输入的太短了‘,
‘max_length‘:‘太长了‘,
},
)
password1 = fields.CharField(max_length=8,required=True)
password2 = fields.CharField(max_length=8,required=True)
def login(request):
if request.method == "GET":
return render(request,‘login.html‘)
else:
obj = LoginFrom(request.POST)
if obj.is_valid():下面介绍下 is_valid的原理
我们知道username和password1和password2这些字段都是正则表达式，当LoginForm实例化成功，其实就是在把里面的username和password字段再做
self.field = {
‘username’：正则表达式（fields.CharField(min_length=6,max_length=12,required=Tru），
‘password1’：正则表达式，
xxx：xxx
}当做了上面的步骤后，然后就是开始循环这个self.field。
flag= True
errors
cleaned_data
for k,v in self.fields.items():
#k就是username，v就是正则表达式
input_value = request.post.get(k)#因为这里设置的字段名字是和前端的name是一样的
正则和表达式和input_value
flag = False
return flag通过上面的流程 我们就能判断得到is_valid()是否为真或者假
Form和Ajax的提交验证
ajax提交数据后，填入的内容不会丢失，页面不会刷新，
<form id="fid" action="/login.html/" method="post">
<p><input type="text" name="username">用户名</p>{{ obj.errors.username.0 }}
<p><input type="password" name="password">密码</p>{{ obj.errors.username.0 }}
{# <p><input type="password" name="password2">确认密码</p>{{ error }}#}
<p><input type="submit" value="提交"></p>
{# <p><input type="submit" onclick="ajaxclick()">ajax提交</p>#}
<a onclick="ajaxclick();">ajax提交</a>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function ajaxclick() {
$.ajax({
url:‘/ajaxlogin/‘,
type:‘POST‘,
data:$(‘#fid‘).serialize(),
success:function (args) {
console.log(args);
}
})
}
</script>class LoginFrom(Form):
username = fields.CharField(min_length=6,max_length=12,required=True,
error_messages={
‘required‘:‘用户不能为空‘,
‘min_length‘:‘输入的太短了‘,
‘max_length‘:‘太长了‘,
},
)
password = fields.CharField(max_length=6,required=True)
def login(request):
if request.method == "GET":
return render(request,‘login.html‘)
else:
obj = LoginFrom(request.POST)
if obj.is_valid():
return redirect(‘http://www.baidu.com‘)
# pp1 = obj.cleaned_data[‘password1‘]
# # pp2 = obj.cleaned_data[‘password2‘]
# if pp1 != pp2:
# return render(request,‘login.html‘,{‘error‘:‘两次内容不一样‘})
# else:
# print(obj.cleaned_data)#字典类型
# return redirect(‘http://www.baidu.com‘)
else:
return render(request,‘login.html‘,{‘obj‘:obj})
def ajaxlogin(request):
obj = LoginFrom(request.POST)
if obj.is_valid():
print(obj.cleaned_data)
else:
print(obj.errors)
return HttpResponse(‘......‘)#这里也可以返回render，因为render代码最后还是httpresponse返回的，一般这里是返回一个json.doumps的数据
ajax提交显示错误信息
obj.errors，是一个对象，我们要想把这个对象里面的数据传到前端，好的方法是通过json转化成字典，然后就可以传到前端。根据这个思路我们要导入json模块，优化有设置一个字典，方便前端查找
def ajaxlogin(request):
import json
ret = {‘status‘:True,‘msg‘:None}#设置了一个字典类型的数据ret
obj = LoginFrom(request.POST)
if obj.is_valid():
print(obj.cleaned_data)
else:
ret[‘status‘] = False
ret[‘msg‘] = obj.errors#这是一个对象
print(obj.errors)
v = json.dumps(ret)#转换为字典类型
return HttpResponse(v)通过后端的传给来的v数据，我们前端需要在success后，执行一些把错误信息提取出来，然后显示到页面上
<script>
function ajaxclick() {
$(‘.c1‘).remove();
$.ajax({
url:‘/ajaxlogin/‘,
type:‘POST‘,
data:$(‘#fid‘).serialize(),
dataType:‘JSON‘,#自动解压json格式，要添加这个参数
success:function (args) {
console.log(args);
if (args.status){#args就是那边传过来的v，由于里面包含了字段status和其他字段
}else {
$.each(args.msg,function (index,value) {#通过循环msg字典，
var tag = document.createElement(‘span‘);
tag.className=‘c1‘;#添加一个class，为了上面的清除数据，如果没有这一行和上面的一行remove，发现报错信息会一直在后面显示，是一个累加的形式
tag.innerHTML = value[0];#不管有几个，还是取第一个值
$("#fid").find(‘input[name="‘+ index +‘"]‘).after(tag);#这里使用到了拼接字符串
})
}
}
})
}
</script>前端，msg的样式
原文地址：http://blog.51cto.com/sgk2011/2083075
时间： 2024-10-18 02:48:42