一、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. Linux 安装Zookeeper<准备>(使用Mac远程访问)

    阅读本文需要安装JDK 一 Zookeeper简介 zookeeper是用java语言编写的一款为分布式应用所设计的协调服务 zookeeper是apacahe hadoop的子项目 使用zookee ...

  2. 三、Django之请求与响应-Part 1

    一.新建项目 进入你指定的项目保存目录,然后运行下面的命令: $ django-admin startproject mysite 这将在目录下生成一个mysite目录,也就是你的这个Django项目 ...

  3. hadoop 基础入门

    启动:   格式化节点:bin/hdfs namenode -format   全部启动:sbin/start-dfs:datanode.namenode                    sbi ...

  4. TW实习日记：第八天

    今天早上主要是接着做昨天的微信端网页预览附件,听同事说当打包代码放入服务器上后,就不存在跨域问题了,也就懒得自己写接口了,那么就希望自己能一次过吧...结果写着写着,发现开发文档中关于预览文件的方法, ...

  5. STC 单片机ADC实现原理

    模数转换器原理 数模转换器( analog to digitI converter,ADC),简称为A/D,ADC是链接模拟世界和数字世界的桥梁.它用于将连续的模拟信号转换为数字形式离散信号.典型的, ...

  6. PytorchZerotoAll学习笔记（三）--自动求导

    Pytorch给我们提供了自动求导的函数,不用再自己再推导计算梯度的公式了 虽然有了自动求导的函数,但是这里我想给大家浅析一下:深度学习中的一个很重要的反向传播 references:https:// ...

  7. Python3【基础】-表达式与运算符

    一.什么是表达式? 1+2*3就是一个表达式,这里的加号和乘号叫做运算符,1.2.3叫做操作数.1+2*3计算的结果是7,计算结果可以存到一个变量中,即:res = 1 + 2 * 3. 所谓的表达式 ...

  8. python中 try、except、finally 的执行顺序

        def test1(): try: print('to do stuff') raise Exception('hehe') print('to return in try') return ...

  9. 四则运算(Android)版

    实验题目: 将小学四则运算整合成网页版或者是Android版.实现有无余数,减法有无负数.... 设计思路: 由于学到的基础知识不足,只能设计简单的加减乘除,界面设计简单,代码量少,只是达到了入门级的 ...

  10. HTML图片标签

    <body> <!-- 使用img标签来向网页中引入外部的图片, img标签也是一个自结束标签 属性: src:设置一个外部图片的路径 alt:可以用来设置图片不能显示时,就会显示图 ...