一、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. Phaser3 屏幕适配iPhoneX、iPhoneXs的坑 -- JavaScript Html5 游戏开发

      PhaserJS 坑:在config内不要把 width 设为 window.innnerWidth在config内不要把 width 设为 window.innnerWidth在config内不 ...

  2. 人脸辨识，用树莓派Raspberry Pi实现舵机云台追踪脸孔

    影像辨识作为近年最热门的专业技术之一,广泛用于智慧监视器.车电监控.智慧工厂.生物医疗电子等等:其中,人脸辨识是一个很重要的部分,网络上已经有相当多的资源可供下载使用:于是我们使用舵机云台作为镜头旋转 ...

  3. sublime3配置java开发环境

    链接:http://www.jianshu.com/p/48a524a4f63c 或者:http://www.jianshu.com/p/9d167c4c4feb 侵权删!

  4. Tensorflow - Implement for a Softmax Regression Model on MNIST.

    Coding according to TensorFlow 官方文档中文版 import tensorflow as tf from tensorflow.examples.tutorials.mn ...

  5. kaldi DNN在线解码 aishell为例

    在kaldi 的工具集里有好几个程序可以用于在线识别.这些程序都位在src/onlinebin文件夹里,他们是由src/online文件夹里的文件编译而成(你现在可以用make ext 命令进行编译) ...

  6. Professional Books

    Machine Learning:     Pattern Recognition and Machine Learning(PRML)    https://mqshen.gitbooks.io/p ...

  7. 2.airflow参数简介

    比较重要的参数: 参数 默认值 说明 airflow_home /home/airflow/airflow01 airflow home,由环境变量$AIRFLOW_HOME决定 dags_folde ...

  8. ASP.NET MVC5 学习系列之视图

    一.视图约定 当创建一个项目模版时,可以注意到,项目以一种非常具体的方式包含了一个结构化的Views目录.在每一个控制器的View文件夹中,每一个操作方法都有一个同名的视图文件与其对应.(约定大于配置 ...

  9. t2

    测评项目 : 福大助手 组长博客链接:https://www.cnblogs.com/dawnduck/p/10093752.html 第一部分:调研,评测 评测 1. 第一次上手体验 安卓: 进入页 ...

  10. Spring的事务到底该给Dao配置还是给Service配置

    Spring的事务到底该给Dao配置还是给Service配置 Spring事务为业务逻辑进行事务管理,保证业务逻辑上数据的原子性. 事务得根据项目性质来细分:事务可以设置到三个层面(dao层.serv ...