用户在网页上进行表单填写时，有可能出现某项填写错误。一般情况下，用户在未发觉错误的情况下点击提交，则此表单的内容会清空，用户不得不再重新填写，这样的用户体验是及其糟糕的。

在此，我们有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标签，提示用户


效果：


												


											
Django—Form两种保留用户提交数据的方法的更多相关文章
	

    
								
  1. 除了GPS外的4种获得用户地理位置数据的方法
		
    纯粹的GPS解决方案以及它所生成的经纬度标签是地理位置数据的公认标准.但是至少还有4种方法可以获得地理位置数据: 1.手机信号塔数据:当移动设备的GPS芯片不能接收到GPS信号时,移动设备就需要与它所 ...
    
		
    2. 
						
  2. Django—Form两种解决表单数据无法动态刷新的方法
		
    一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为“多对多” from django.db import models class Classes(models. ...
    
		
    3. 
						
  3. 【Django】Django—Form两种解决表单数据无法动态刷新的方法
		
    一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为“多对多” from django.db import models class Classes(models. ...
    
		
    4. 
						
  4. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
		
    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
    
		
    5. 
						
  5. Silverlight实例教程 - Validation用户提交数据验证捕获（转载）
		
    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...
    
		
    6. 
						
  6. mybatis oracle两种方式批量插入数据
		
    mybatis oracle两种方式批量插入数据 注意insert,一定要添加: useGeneratedKeys="false" ,否者会报错. <insert id=&q ...
    
		
    7. 
						
  7. 两种计算Java对象大小的方法
		
    之前想研究一下unsafe类,碰巧在网上看到了这篇文章,觉得写得很好,就转载过来.原文出处是: http://blog.csdn.net/iter_zc/article/details/4182271 ...
    
		
    8. 
						
  8. ASP模拟POST请求异步提交数据的方法
		
    这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...
    
		
    9. 
						
  9. python通过post提交数据的方法
		
    python通过post提交数据的方法 本文实例讲述了python通过post提交数据的方法.分享给大家供大家参考. 具体实现方法如下:     # -*- coding: cp936 -*- imp ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 如何解决ChemDraw引起的系统崩溃
			
    运行ChemDraw应用程序时,一般不会引起系统崩溃,但在使用CS software产品可能会引发计算机崩溃.为了方便广大用户的使用,本教程将教授大家如何解决ChemDraw运行中引起的系统崩溃. 当 ...
    
			
    2. 
						
  2. Invalidate()函数
			
    Invalidate( ) :使整个窗口客户区无效, 并进行更新显示的函数 介绍 void Invalidate( BOOL bErase = TRUE ); 参数: bErase 决定了是否要在WM ...
    
			
    3. 
						
  3. 如何在 React Native 中写一个自定义模块
			
    https://my.oschina.net/jpushtech/blog/983230
    
			
    4. 
						
  4. 在联网时，两台linux服务器传输文件方法
			
    登陆服务器root用户命令:su - root 传输文件命令:scp +需要传输linux系统文件+空格+目标linux服务器的用户名@服务器ip地址:+传输的文件路径:例:scp /mnt/work ...
    
			
    5. 
						
  5. C语言100个经典的算法之兔子总数计算内含printf的用法
			
    语言的学习基础,100个经典的算法 C语言的学习要从基础开始,这里是100个经典的算法-1C语言的学习要从基础开始,这里是100个经典的算法 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一 ...
    
			
    6. 
						
  6. ios Instruments 内存泄露
			
    本文转载至 http://my.oschina.net/sunqichao/blog?disp=2&p=3 虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄露还是 ...
    
			
    7. 
						
  7. AJAX同步设置以及请求代码
			
    全局设置ajax同步 更正一点:这个的同步,针对的是ajax请求的返回,而不是ajax-success返回后所有进行处理后才进行下一步.所以,window.location.href转跳这个在执行的时 ...
    
			
    8. 
						
  8. android基础---->音频和视频的使用
			
    Android 在播放音频和视频方面也是做了相当不错的支持,它提供了一套较为完整的API,使得开发者可以很轻松地编写出一个简易的音频或视频播放器.今天我们开始android中音频和视频使用的学习. 目 ...
    
			
    9. 
						
  9. sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
			
    经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...
    
			
    10. 
						
  10. zabbix修改和查看登录密码
			
    author:hendsen chen date : 2018-08-30  16:48:18 1,登陆zabbix的服务器,查看zabbix的登陆密码: [root@jason ~]# mysql  ...
    
			
    11.