用户在网页上进行表单填写时，有可能出现某项填写错误。一般情况下，用户在未发觉错误的情况下点击提交，则此表单的内容会清空，用户不得不再重新填写，这样的用户体验是及其糟糕的。
在此，我们有2种方法将用户的输入保存下来，一旦填写错误，只需要将错误项修改即可重新提交。
一、利用Form生成Html标签
1. views.py
from django.shortcuts import render, HttpResponse, redirect
from django.forms import Form, fields, widgets #Form验证
class TestForm(Form):
inp1 = fields.CharField(min_length=4, max_length=8)
inp2 = fields.EmailField()
inp3 = fields.IntegerField(min_value=10, max_value=100) #测试函数
def test(request):
if request.method == 'GET':
obj = TestForm()
return render(request, 'test.html', {'obj': obj})
else:
obj = TestForm(request.POST)
if obj.is_valid():
return HttpResponse('提交成功')
return render(request, 'test.html', {'obj': obj})
2. test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/test/" method="post" novalidate>
{% csrf_token %}
<p>输入1{{ obj.inp1 }} {{ obj.errors.inp1.0 }}</p>
<p>输入2{{ obj.inp2 }} {{ obj.errors.inp2.0 }}</p>
<p>输入3{{ obj.inp3 }} {{ obj.errors.inp3.0 }}</p>
<input type="submit" value="提交">
</form>
</body>
</html>
novalidate屏蔽浏览器提供的表单验证功能
说明：
若用户输入不符合自定义的Form规则，则会返回obj = TestForm(request.POST)，重新渲染test.html，而此时，obj中包含了上次用户输入的所有内容。
效果：
提交之后出现错误提示，但用户输入的数据依然存在
二、利用Ajax提交数据不刷新页面
Ajax提交数据虽然不刷新网页，但是无法完成用户输入验证，还须借助Form返回给其验证信息
1. views.py
from django.shortcuts import render, HttpResponse, redirect
from django.forms import Form, fields, widgets
import json #Form验证
class TestForm(Form):
inp1 = fields.CharField(min_length=4, max_length=8)
inp2 = fields.EmailField()
inp3 = fields.IntegerField(min_value=10, max_value=100) def test(request):
return render(request, 'test.html') def ajax_test(request):
ret = {'status': True, 'msg': None}
obj = TestForm(request.POST)
if obj.is_valid():
v = json.dumps(ret)
return HttpResponse(v)
else:
ret['status'] = False
ret['msg'] = obj.errors
v = json.dumps(ret)
return HttpResponse(v)
2. test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1">
{% csrf_token %}
<p>输入1 <input type="text" name="inp1"></p>
<p>输入2 <input type="text" name="inp2"></p>
<p>输入3 <input type="text" name="inp3"></p>
<input type="button" onclick="ajax_submit();" value="提交">
</form>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
function ajax_submit() {
{# 删除上次错误提示#}
$(".c1").remove();
$.ajax({
url: '/ajax_test/',
type: 'POST',
data: $("#f1").serialize(),
dataType: 'JSON',
success: function (args) {
if(args.status){
location.href="http://www.163.com";
}else{
$.each(args.msg, function (index,value) {
console.log(index,value);
var tag=document.createElement('span');
tag.className='c1';
tag.innerHTML=value[0];
$("#f1").find('input[name="'+index+'"]').after(tag);
})
}
}
})
}
</script>
</html>
说明：
若用户输入不符合Form规则，ajax获取错误信息，并动态添加错误信息至span标签，提示用户
效果：
