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