页面注册系统--使用forms表单结合ajax

在Django中通过forms构建一个表单

1.urls.py 配置路由

from django.conf.urls import url

from django.contrib import admin

from blog import views

urlpatterns = [

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

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

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

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

    # 用户注册页面 reg

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

]

2.在app 包路径 创建一个forms.py 用于定义类：

from django import forms

from django.forms import widgets

from django.core.exceptions import NON_FIELD_ERRORS, ValidationError

class RegForm(forms.Form):

    username = forms.CharField(min_length=5,

                               # 定义 class 类型 form-control 为 bootcss 样式

                               widget=widgets.TextInput(attrs={"class": "form-control"})

                               )

    password = forms.CharField(min_length=5,

                               widget=widgets.PasswordInput(attrs={"class": "form-control"}))

    repeat_password = forms.CharField(min_length=5,

                                      widget=widgets.PasswordInput(attrs={"class": "form-control"})

                                      )

    email = forms.EmailField(min_length=5,

                             widget=widgets.TextInput(attrs={"class": "form-control"})

                             )

    # 清洗全局 钩子用于清洗 两次用户输入的密码是否一致

    def clean(self):

        if self.cleaned_data.get("password") == self.cleaned_data.get("repeat_password"):

            return self.cleaned_data

        else:

            raise ValidationError("两次密码不一致")

3.视图views.py页面配置

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.

from PIL import Image

from django.contrib import auth

from .models import *

import json

from django.contrib.auth.decorators import login_required

from blog.forms import RegForm

def reg(request):

    if request.is_ajax():

        regForm = RegForm(request.POST)

        regResponse = {"user": None, "error_msg": None}

        if regForm.is_valid():

            username = regForm.cleaned_data.get("username")

            password = regForm.cleaned_data.get("password")

            # repeat_password = regForm.cleaned_data.get("repeat_password")

            email = regForm.cleaned_data.get("email")

            user = UserInfo.objects.create_user(username=username, password=password, email=email)

            regResponse["user"] = username

        else:

            regResponse["error_msg"] = regForm.errors

        return HttpResponse(json.dumps(regResponse))

    # 将forms.py 数据实例化给前端 模板

    regForm = RegForm()

    return render(request, "reg.html", {"regForm": regForm})

4.模板页面reg.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="/static/css/login.css">

    <link rel="stylesheet" href="/static/dist/css/bootstrap.css">

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

    <script src="/static/dist/js/bootstrap.js"></script>

    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

</head>

<body>

<div class="container">

    <div class="row">

        <form class="col-md-6 col-md-offset-3">

            <div class="form-group">

                <label for="user">用户名</label>

                {{ regForm.username }} <span class="err_msg"></span>

            </div>

            <div class="form-group">

                <label for="pwd">密码</label>

                {{ regForm.password }} <span class="err_msg"></span>

            </div>

            <div class="form-group">

                <label for="pwd">确认密码</label>

                {{ regForm.repeat_password }} <span class="err_msg"></span>

            </div>

            <div class="form-group">

                <label for="pwd">邮箱</label>

                {{ regForm.email }} <span class="err_msg"></span>

            </div>

            <div class="row">

                <div class="col-md-6">

                    <input type="button" value="登录" class="btn-primary btn Regbtn">

                </div>

            </div>

        </form>

    </div>

</div>

<script>

    $(".Regbtn").click(function () {

        $.ajax({

            url:"/reg/",

            // csrftoken 值 放在 headers 中

            headers:{"X-CSRFToken":$.cookie('csrftoken')},

            type:"post",

            // 输出序列化表单值的结果： 通过 form定义的 id=reg 属性 .serialize()  可以获取里面所有的键值对

            data:$("#reg").serialize(),                // 通过serialize()  获取所有的键值对

            //  http://www.w3school.com.cn/jquery/ajax_serialize.asp     // 参考

            //  data:{                                 // 与此结果一致

            //  username:$("#id_username").val(),

            //  password:$("#id_password").val(),

            //  repeat_password:$("#id_repeat_password").val(),

            //  email:$("#id_email").val()

            //  },

            success:function (data) {

                var data=JSON.parse(data);

                if(data.user){

                    location.href="/login/"

                }

                else {

                    // 在每次 点击提交时，将错误信息清空

                    $(".err_msg").html("");

                    var error_dict = data.error_msg;

                    // 通过 each 循环错误信息，里的 key 和 值

                    $.each(error_dict,function (i,j) {

                        console.log(i,j);

                        // 拼接 forms 生成的 id 标签，在其后面标签添加 内容

                        $("#id_"+i).next().addClass("pull-right").html(j[0]).css("color","red");

                        // 判断如果 i 等于 __all__ 全局 清洗 钩子 返回的错误，将错误值放到  id_repeat_password 后面

                        if(i=="__all__"){

                            $("#id_repeat_password").next().addClass("pull-right").html(j[0]).css("color","red");

                        }

                    })

                }

            }

        })

    })

</script>

</body>

</html>

页面注册系统--使用forms表单结合ajax的更多相关文章

  1. Django实战(一)-----用户登录与注册系统4（表单）

    我们前面都是手工在HTML文件中编写表单form元素,然后在views.py的视图函数中接收表单中的用户数据,再编写验证代码进行验证,最后使用ORM进行数据库的增删改查.这样费时费力,整个过程比较复杂 ...

  2. django实现密码加密的注册（数据对象插入）-结合forms表单实现表单验证

    forms表单 #_*_coding:utf-8_*_ from django import forms class regis(forms.Form): username = forms.CharF ...

  3. Django框架form表单配合ajax注册

    总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 下面是写的登录页面的实例 1:views视图中的代码 # 注册页面 def regi ...

  4. Python的Django框架中forms表单类的使用方法详解

    用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...

  5. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  6. 织梦自定义表单通过ajax提交的实现方法

    自定义表单通过ajax判断,提交不用跳转页面,提高用户体验.具体方法如下: html表单代码部分,就提交按钮改成botton,,添加onclick事件 表单代码: <form action=&q ...

  7. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  8. form表单的ajax验证2

    form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  9. 关于form表单或者Ajax向后台发送数据时，数据格式的探究

    最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...

随机推荐

  1. 查看oracle 用户执行的sql语句历史记录

      select * from v$sqlarea t order by t.LAST_ACTIVE_TIME desc

  2. Hadoop Steaming开发之WordCount

    简单的WordCount栗子--类似于编程语言中的hello world 1.shell脚本run.sh HADOOP_CMD="/usr/local/src/hadoop-1.2.1/bi ...

  3. Boost 序列化

    原文链接: https://blog.csdn.net/qq2399431200/article/details/45621921 1. 编译器 gcc, boost 1.55 2.1第一个简单的例子 ...

  4. 论文笔记：Deep Residual Learning

    之前提到,深度神经网络在训练中容易遇到梯度消失/爆炸的问题,这个问题产生的根源详见之前的读书笔记.在 Batch Normalization 中,我们将输入数据由激活函数的收敛区调整到梯度较大的区域, ...

  5. Spring Resource配置

    1-classpath的设置: 2-Resource类型 3-ResourceLoader接口 加载resource的接口,只有一个方法getResource().所有ApplicationConte ...

  6. Pytorch Visdom

    fb官方的一些demo 一.  show something 1.  vis.image:显示一张图片 viz.image( np.random.rand(3, 512, 256), opts=dic ...

  7. pt-table-checksum 使用方法【转】

    27. pt-table-checksum27.1 pt-table-checksum 作用 主要用来检查主从数据是否一致,原理即在主库执行把表每行的列通过concat函数进行拼接,然后对拼接的值进行 ...

  8. MySQL没有备份怎么恢复被drop的表(利用undrop-for-innodb)

    介绍:     也许大家都难以理解,这么重要的数据为啥不备份(或者备份不可用)?而且还任性的drop table了.显然有备份是最好的,但是它们并不总是可用的.这种情况令人恐惧,但并非毫无希望.在许多 ...

  9. MySQL中binlog参数:binlog_rows_query_log_events-记录具体的SQL【转】

    在使用RBR也就是行格式的时候,去解析binlog,需要逆向才能分析出对应的原始SQL是什么,而且,里面对应的是每一条具体行变更的内容.当然,你可以开启general log,但如果我们需要的只是记录 ...

  10. JSLint报错翻译

    “Missing semicolon.” : “缺少分号.”,“Use the function form of \”use strict\”.” : “使用标准化定义function.”,“Unex ...