一、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. fastdfs+nginx+image_filter安装与生成缩略图

    fastdfs简介 类似google FS的一个轻量级分布式文件系统,纯C实现,支持linux.FreeBSD等UNIX系统: 只能通过API访问,不支持POXIS: 文件不分块存储,上传的文件和OS ...

  2. HDU-2844：Coins（多重背包+二进制优化）

    链接:HDU-2844:Coins 题意:给你n个种类的钱和对应的数量,同统计一下从1到m能够凑成的钱有多少个. 题解:C[i] = 1 + 2 + 4 + ··· + 2^k + a (0 < ...

  3. sendcloud golang 发送短信 示例代码

    package main import ( "fmt" "crypto/md5" "encoding/hex" "sort&quo ...

  4. Spark Shell Examples

    Spark Shell Example 1 - Process Data from List: scala> val pairs = sc.parallelize( List( ("T ...

  5. 梯度下降算法以及其Python实现

    一.梯度下降算法理论知识 我们给出一组房子面积,卧室数目以及对应房价数据,如何从数据中找到房价y与面积x1和卧室数目x2的关系?   为了实现监督学习,我们选择采用自变量x1.x2的线性函数来评估因变 ...

  6. java 不同数据类型的相互转化

    在工作中经常会遇到需要将数据类型转化的情况,今天抽出时间总结一下. date——string Date date = new Date(); DateFormat dateformat = new S ...

  7. USACO 2.3.3 Zero Sum 和为零（深搜枚举）

    Description 请考虑一个由1到N(N=3, 4, 5 ... 9)的数字组成的递增数列:1 2 3 ... N. 现在请在数列中插入“+”表示加,或者“-”表示减,抑或是“ ”表示空白,来将 ...

  8. Leftmost Digit（数学）

    Description Given a positive integer N, you should output the leftmost digit of N^N.   Input The inp ...

  9. "Hello World!"团队第十次会议

    Scrum会议 今天是我们"Hello World!"团队第十次召开会议,博客内容是: 1.会议时间 2.会议成员 3.会议地点 4.会议内容 5.todo list 6.会议照片 ...

  10. 对其中的一个特点将NABC的分析结果

    一.题目要求 每一个组员针对其中的一个特点将NABC的分析结果发表博客上(截止日期4月8日晚24:00前). 二.分析结果 特点之一:通讯方便 <渴了么>这个安卓APP特点之一就是通讯方便 ...