一、Form提交验证与Ajax提交验证的运用实例

Form表单提交时会刷新页面，输入失败时，输入框内内容也会随之刷新不能保留；而Ajax提交是在后台偷偷提交，不会刷新页面，因此也就可以保留页面输入框内的内容。

1. 浏览器访问

http://127.0.0.1:8000/login/

http://127.0.0.1:8000/register/

2. urls

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^login/', views.login),

    url(r'^ajax_login/', views.ajax_login),

    url(r'^test/', views.test),

    url(r'^register/', views.register),

]

3. views

from django.shortcuts import render,redirect,HttpResponse

from django.forms import Form

from django.forms import fields

from django.forms import widgets

导入模块

 class LoginForm(Form):

     user = fields.CharField(required=True)

     pwd = fields.CharField(min_length=18)

 def login(request):

     """

     obj = xxx(request.POST)

     # 是否校验成功

     v = obj.is_valid()

     # html标签name属性 = Form类字段名

     # 所有错误信息

     obj.errors

     # 正确信息

     obj.cleaned_data

     """

     if request.method == 'GET':

         return render(request,'login.html')

     else:

         obj = LoginForm(request.POST)

     """

     1.LoginForm实例化时，

         self.fields={

             'user':正则表达式

             'pwd':正则表达式

         }

     2.循环self.fields

         flag = True

         errors

         cleaned_data

         for k,v in self.field.items():

             #1.user,正则表达式

             input_value = request.POST.get(k)

             正则表达式和input_value

             flag = False

         :return flag

     """

     if obj.is_valid():

         print(obj.cleaned_data)    #拿到正确信息

         return redirect('http://www.baidu.com')

     return render(request,'login.html',{'obj': obj})        #拿到错误信息返回login.html(带着错误信息一起)

 def ajax_login(request):

     import json

     ret = {'status': True,'msg': None}

     obj = LoginForm(request.POST)

     if obj.is_valid():

         print(obj.cleaned_data)

     else:

         # print(obj.errors) # obj.errors对象    #拿到错误信息

         ret['status'] = False

         ret['msg'] = obj.errors

     v = json.dumps(ret)

     return HttpResponse(v)

 class TestForm(Form):

     t1 = fields.CharField(required=True,max_length=8,min_length=2,

         error_messages={

             'required': '不能为空',

             'max_length': '太长',

             'min_length': '太短',

         }

     )

     t2 = fields.EmailField()

 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():

             print(obj.cleaned_data)

         else:

             print(obj.errors)

         return render(request,'test.html',{'obj':obj})

 class RegiterForm(Form):

     user = fields.CharField(min_length=8)

     email = fields.EmailField()

     password = fields.CharField()

     phone = fields.RegexField('139\d+')

 def register(request):

     if request.method == 'GET':

         obj = RegiterForm()

         return render(request,'register.html',{'obj':obj})

     else:

         obj = RegiterForm(request.POST)

         if obj.is_valid():

             print(obj.cleaned_data)

         else:

             print(obj.errors)

         return render(request,'register.html',{'obj':obj})

views

4. templates

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <h1>用户登录</h1>

     <form id="f1" action="/login/" method="POST">

         {% csrf_token %}

         <p>

             <input type="text" name="user" />{{ obj.errors.user.0 }}

         </p>

         <p>

             <input type="password" name="pwd" />{{ obj.errors.pwd.0 }}

         </p>

         <input type="submit" value="提交" />

         <a onclick="submitForm();">提交</a>

     </form>

     <script src="/static/jquery-3.2.1.js"></script>

 {#    ajax提交时在后台偷偷提交，不会刷新页面，这也就保留了输入框内的数据#}

     <script>

         function submitForm(){

             $('.c1').remove();

             $.ajax({

                 url: '/ajax_login/',

                 type: 'POST',

                 data: $('#f1').serialize(),// user=alex&pwd=456&csrftoen=dfdf\

                 dataType:"JSON",

                 success:function(arg){

                     console.log(arg);

                     if(arg.status){

                     }else{

                         $.each(arg.msg,function(index,value){

                             console.log(index,value);

                             var tag = document.createElement('span');

                             tag.innerHTML = value[0];

                             tag.className = 'c1';

                             $('#f1').find('input[name="'+ index +'"]').after(tag);

                         })

                     }

                 }

             })

         }

     </script>

 </body>

 </html>

login

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <form action="/register/" method="POST" novalidate>           {# novalidate  提交表单时让浏览器不对其进行验证 #}

         {% csrf_token %}

         <p>

             {{ obj.user }} {{ obj.errors.user.0 }}

         </p>

         <p>

             {{ obj.email }} {{ obj.errors.email.0 }}

         </p>

         <p>

             {{ obj.password }} {{ obj.errors.password.0 }}

         </p>

         <p>

             {{ obj.phone }} {{ obj.errors.phone.0 }}

         </p>

         <input type="submit" value="提交"  />

     </form>

 </body>

 </html>

register

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <form action="/test/" method="POST" novalidate>

         {% csrf_token %}

         <p>

             {{ obj.t1 }}{{ obj.errors.t1.0 }}

         </p>

         <p>

             {{ obj.t2 }}{{ obj.errors.t2.0 }}

         </p>

         <input type="submit" value="提交" />

     </form>

 </body>

 </html>

test

5. 运行显示截图

框架----Django之Form提交验证（一）的更多相关文章

  1. 框架----Django之Form提交验证（二）

    一.Form提交验证之(学生表.老师表.班级表)的添加和编辑实现案例 1. 浏览器访问 http://127.0.0.1:8000/student_list/ http://127.0.0.1:800 ...

  2. AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  3. WEB框架Django之Form组件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一 通过form实现校验字段功能 模型:mod ...

  4. 框架----Django之Form组件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一.小试牛刀 1.创建Form类 from d ...

  5. Django之Form组件验证

    今天来谈谈Django的Form组件操作 Django中的Form一般有两种功能: ·输入html ·验证用户输入 Form验证流程 ·定义规则(是一个类)    ·前端把数据提交过来 ·匹配规则 · ...

  6. Django在form提交CSRF验证失败. 相应中断问题

    CSRF验证失败. 相应中断. 1).首先,我们可以先看一下出现问题的所在的原因. Your browser is accepting cookies. The view function passe ...

  7. Django之Form自定义验证规则

    1.数据源无法时时更新,有两种方法 方式一:重构构造方法(推荐) 方法一:重构构造方法(推荐) class ClassesForm(Form): name = fields.CharField( re ...

  8. web框架-（六）Django补充---form表单验证

    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...

  9. Django框架基础之Form组件

    服务端假设所有用户提交的数据都是不可信任的,所以Django框架内置了form组件来验证用户提交的信息 form组件的2大功能:       1 验证(显示错误信息)       2 保留用户上次输入 ...

随机推荐

  1. Git生成SSH密钥

    git config --global user.name "yangjianliang"配置用户名 git config --global user.email "52 ...

  2. redis 为什么快

    redis采用自己实现的事件分离器,效率比较高,内部采用非阻塞的执行方式,吞吐能力比较大. 不过,因为一般的内存操作都是简单存取操作,线程占用时间相对较短,主要问题在io上,因此,redis这种模型是 ...

  3. 【ANSIBLE】ansible控制windows插件安装及运行error与解决方法

    一. 问:因pip版本问题无法安装kerberos 答:安装提示需要先安装pip升级包 下载pip9.0.1升级包: https://pypi.python.org/packages/b6/ac/70 ...

  4. pyextend库-merge可迭代对象合并函数

    pyextend - python extend lib merge (iterable1, *args) 参数:  iterable1: 实现 __iter__的可迭代对象, 如 str, tupl ...

  5. Linux学习——echo和read命令用法

    转载自http://www.runoob.com/linux/linux-comm-read.html http://www.178linux.com/76331 echo命令 本文列举了echo命令 ...

  6. Farm Irrigation ZOJ 2412（DFS连通图）

    Benny has a spacious farm land to irrigate. The farm land is a rectangle, and is divided into a lot ...

  7. 20170928-3 四则运算psp

    1.本周psp: 2.本周进度条: 3.累计进度图(折线图): 4.psp饼状图:

  8. POJ 2392 Space Elevator 贪心+dp

    题目链接: http://poj.org/problem?id=2392 题意: 给你k类方块,每类方块ci个,每类方块的高度为hi,现在要报所有的方块叠在一起,每类方块的任何一个部分都不能出现在ai ...

  9. JS 中substring() , substr(), slice() 的区别

    substr(start, length) : 截取从start索引开始的字符,长度为length的字符串 substring(start, end) : 截取从start索引开始的字符,以end索引 ...

  10. mac python install zlib not available

    用brew install 3.4.4(python)时报 zipimport.ZipImportError: can't decompress data; zlib not available 的错 ...