一、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. spring-boot断点调试(IDEA)

  2. Java如何调用shell脚本的

    有些时候会碰到这样的场景:java的功能里面要嵌入一个功能点,这个功能是通过是shell脚本实现的.这种时候就需要Java对脚本调用的支持了. 测试环境 Ubuntu16.04 i3-6100,12G ...

  3. JavaScript学习笔记（四）——DOM

    第五章 网页交互——文本对象模型[Document object model] 1 简单介绍DOM,dom是将html与javascript进行交互的工具. [使用innerHTML时注意:html中 ...

  4. android点击事件的四种方式

    android点击事件的四种方式 第一种方式:创建内部类实现点击事件 代码如下: package com.example.dail; import android.text.TextUtils; im ...

  5. hive 2以上版本启动异常 Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient

    hive2.0以上的版本启动时 抛出 “Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreCli ...

  6. Fiber Network ZOJ 1967(Floyd+二进制状态压缩)

    Description Several startup companies have decided to build a better Internet, called the "Fibe ...

  7. “取件帮”微信小程序宣传视频链接及内容介绍

    1.视频链接 视频上传至优酷自频道,地址链接:http://v.youku.com/v_show/id_XMzg2NTM3OTc5Ng==.html?spm=a2hzp.8253869.0.0 2.视 ...

  8. 【dp】New Keyboard

    http://codeforces.com/gym/101397 B dp[i][j][k]: i为前一个行动的状态,0-switch.1-type,j为当前状态layout的编号,k 是已键入的字符 ...

  9. Alpha 冲刺（9/10）

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 多次测试软件运行 学习OPENMP ...

  10. 福大软工1816：Beta（2/7）

    Beta 冲刺 (2/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 为utils_wxpy.py添加注释 ...