页面注册系统--使用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. Web方面的错误， 异常来自hresult:0x80070057(E_INVALIDARG)

    删除 C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/Temporary ASP.NET files 这个文件夹. 解决方法: 1.代码保存频繁一点.做一个 ...

  2. Spring Boot中的initializers的作用分析

    在SpringApplication的实例属性中有一个初始器的属性:List<ApplicationContextInitializer<?>> initializers ,这 ...

  3. 解决“错误 D8016 “/ZI”和“/Gy-”命令行选项不兼容 ”问题

    在Visual Studio 2017中调试VC++6.0代码,出现该问题,解决方案如下:(1)[项目]—>[属性]—>[C/C++]—> [常规]—>[调试信息格式]—> ...

  4. LabVIEW中下拉列表和枚举的区别（两点）

    第一:如图,在表示法上,下拉列表表示的数据范围要大,枚举只能是U32,U16, U8 第二:在vi的动态调用过程中,常用下拉列表,因为枚举控件不能动态的增加或者减少项目,而下拉列表则可以.

  5. 43)django-用户认证,授权,自定义用户认证

    ##用户认证 django自带用户认证系统,包括认证和授权.用户认证系统由用户,权限,用户组,密码,cookie和session给组成. ###用户认证系统设置 #settings.py INSTAL ...

  6. Linux平台 Oracle 18c RAC安装

    Linux平台 Oracle 18c RAC安装Part1:准备工作 2018-08-04 22:20 by AlfredZhao, 1065 阅读, 0 评论, 收藏, 编辑 一.实施前期准备工作 ...

  7. 公历和农历转换的JS代码（车）

    <!-- function CalConv(M) { FIRSTYEAR = 1936; LASTYEAR = 2031; LunarCal = [ new tagLunarCal(23, 3, ...

  8. Java、Apache Tomcat下载与安装及环境变量配置

    1.Java JDK 与 Apache Tomcat 下载 JDK 下载 Apache Tomcat 下载 2.安装与环境变量配置 关于 JDK 的安装挺简单的,网上教程也挺多,Tomcat 下载免安 ...

  9. functions 示例

    示例1:  ","字符串截取 CREATE OR REPLACE FUNCTION splitstr(p_string IN VARCHAR2, p_delimiter IN VA ...

  10. Confluence 6 用户宏示例 - Color and Size

    这个示例定义了如何向你宏中传递参数.我们将会创建一个字体样式宏,在这个宏中有 2 个参数,允许用户在这 2 个参数中指定宏中包含的字体的颜色大小. Macro name stylish Visibil ...