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

在此，我们有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. 【matlab】运动目标检测之"背景差分算法“
			
    clear; clc; i1=imread('D:\Work\1.png'); i2=imread('D:\Work\2.png'); i1=rgb2gray(i1); i2=rgb2gray(i2) ...
    
			
    2. 
						
  2. linux中，查看某个命令是来自哪个RPM包或者是通过哪个RPM包安装的
			
    需求描述: 今天在测试ssh命令到底是哪个RPM包,安装之后生成的,找了一些文档 在这里进行记录下,主要是rpm -qf命令的使用,查询文件在哪个包里. 操作过程: 1.通过whereis 定位ssh ...
    
			
    3. 
						
  3. ubuntu下vim配置(刷题和比赛两套)
			
    1. 平时刷题练习使用 "mswin.vim 插件提供windows下的编辑快捷键功能 source $VIMRUNTIME/mswin.vim behave mswin set nu se ...
    
			
    4. 
						
  4. Emulator Error: Could not load OpenGLES emulation library: Could not load DLL!
			
    Copy the file below from SDK\tools\lib to SDK\tools. libEGL_translator.dlllibGLES_CM_translator.dlll ...
    
			
    5. 
						
  5. SVN-001
			
    1.cd到指定目录: 2.执行:svn cleanup:
    
			
    6. 
						
  6. JS-对象查找父级
			
    之前在寻找两个以上的父级,一直傻傻的用parent().parent()... 今天,需要写五个,当然以前也是写过五个的,但是今天总想着换个简单的方式,至少不要.parent().parent().p ...
    
			
    7. 
						
  7. MySQL查询语句练习题
			
    1.创建student和score表 CREATE  TABLE  student ( id  INT(10)  NOT NULL  UNIQUE  PRIMARY KEY  , name  VARC ...
    
			
    8. 
						
  8. 让你变成ASP木马高手
			
    .名称:如何制作图片ASP木马 (可显示图片) 建一个asp文件,内容为<!--#i nclude file="ating.jpg"--> 找一个正常图片ating.j ...
    
			
    9. 
						
  9. 注册和删除Apache服务器的方法
			
    Apache服务器的安装和卸载方法 下载Apache安装包   将Apache文件夹存在桌面或其他盘,输入cmd打开命令提示行   安装步骤:进入Apache安装目录下的bin目录: cd C:\Us ...
    
			
    10. 
						
  10. js基础---->js中的消息框
			
    可以在JavaScript 中创建三种消息框:警告框.确认框.提示框.今天我们就这几个框做一个介绍.我们笑着说再见,却深知再见遥遥无期. javascript消息框 一.警告框:警告框经常用于确保用户 ...
    
			
    11.