数据库部分

使用的是auth_user表，添加r_pwd字段后表名变为UserInfo

from django.db import models

from django.contrib.auth.models import AbstractUser

class UserInfo(AbstractUser):

    r_pwd=models.CharField(max_length=32)

modelforms 类  需要自己建立,然后需要引

from django.forms import ModelForm

from app01.models import UserInfo

from django.core.exceptions import NON_FIELD_ERRORS, ValidationError #认证错误

import re

from django.forms import widgets as wig

class UserModelForm(ModelForm):

    # r_pwd = forms.CharField(min_length=5, widget=widgets.PasswordInput(), label="确认密码")  #外接字段，数据库中没有的字段

    class Meta:

        model=UserInfo

        fields=["username","password","r_pwd","email"]

        labels={

            "username":"用户名",

            "password":"密码",

            "r_pwd":"确认密码",

            "email":"邮箱"

        }

        widgets={

            "password":wig.PasswordInput(attrs={"type":"password"}),

            "r_pwd":wig.PasswordInput(attrs={"type":"password"})

        }

        # error_messages = {

        #     "username":"用户名格式错误",

        #     "password":"密码格式错误",

        # }

        error_messages = {

            'username': {'required': "用户名不能为空", },

            'password': {'required': "密码不能为空", },

        }

    # 注册的用户不能和数据库中的重复

    def clean_username(self):

        val=self.cleaned_data.get("username")

        user=UserInfo.objects.filter(username=val)

        if user:

            raise ValidationError("用户已存在")

        else:

            return val

    #密码不能纯数字

    def clean_password(self):

        val=self.cleaned_data.get("password")

        if val.isdigit():

            raise ValidationError("密码不能是纯数字")

        else:

            return val

    def clean_email(self):

        val=self.cleaned_data.get("email")

        if re.search("\w+@qq.com$",val):

            return val

        else:

            raise ValidationError("邮箱必须是qq邮箱")

    def clean(self):

        pwd=self.cleaned_data.get("password")

        r_pwd=self.cleaned_data.get("r_pwd")

        if pwd and r_pwd and pwd!=r_pwd:

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

            # self.add_error("r_pwd",ValidationError("两次密码不一致"))

        else:

            return self.cleaned_data

    def __init__(self, *args, **kwargs):#相当于修改forms类的__init__方法

        super().__init__(*args, **kwargs)  #走父类的这个方法

        for filed in self.fields.values():  #循环每个字段对象

            # filed.error_messages={"required":"不能为空"}

            filed.widget.attrs.update({'class': 'form-control'})  #对每个属性添加一个类

url 配置

path('reg_modelform/', views.reg_modelform,name='reg_modelform'),#modelform注册

views配置

################################  基于modelforms的注册##########################################################################

from app01.modelforms import UserModelForm

def reg_modelform(request):

    if request.method=="GET":

        form=UserModelForm()

        return render(request,'reg_mf.html',locals())

    else:

        form = UserModelForm(request.POST)

        print(request.POST)

        response = {"user": None, "err_msg": ""}

        if form.is_valid():

            response["user"]=form.cleaned_data.get("username")

            form.save()

        else:

            print(form.errors)

            response['err_msg']=form.errors

        return JsonResponse(response)

前段页面配置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登陆页面</title>

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

    <script type="text/javascript" src="/static/jquery/jquery.3.3.1.js"></script>

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

</head>

<body>

{#    壁纸##############}

    <div class="wraper"></div>

{############内容#################################}

<div class="container boy">

    <div class="row">

        <div class="col-md-8 col-md-offset-2">

            <form action="" method="post">

                {% csrf_token %}

                {% for field in form %}

                       <div class="form-group">

                            <label for="">{{ field.label }}</label>

                            {{ field }}

                            <p class="error pull-right">{{ field.errors.0 }}</p>

                        </div>

                {% endfor %}

                <input type="reset" class="btn btn-primary" value="重置">

                <input type="button" class="btn btn-primary pull-right reg_btn" value="确认">

            </form>

        </div>

    </div>

</div>

<script>

    $('.reg_btn').click(function () {

        $.ajax({

            url:'',

            type:'post',

            data:{

                user:$("#id_username").val(),   //id_username注意名字别写错了

                pwd:$("#id_password").val(),

                r_pwd:$("#id_r_pwd").val(),

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

                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),

            },

            success:function (response) {

                if(response.user){

                    {#注册成功#}

                    location.href="/login/";

                }else{

                    {#清除旧的错误#}

                $('.error').html("");

                $(".form-group").removeClass("has-error");

                {#展示新的错误#}

                {#循环把错误信息放到相应位置#}

                $.each(response.err_msg,function (i,j) {

                    console.log(i,j);

                    if (i=="__all__"){  //__all__是第二层校验时产生的全局错误

                        $("#id_r_pwd").next().html(j[0]);

                    }else{

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

                    {#has-error有错误外框显红的效果#}

                    }

                })

                }

            }

        })

    })

</script>

</body>

</html>

reg_mf.html

基于modelforms组件实现注册功能的更多相关文章

  1. day 77 基于form组件的注册功能

    Form 表单 py文件 from django import forms #定义一个form类注册用 class RegForm (forms.Form): username =forms.Char ...

  2. Django基于form组件实现注册校验

    一 基本流程 1 创建form组件对应的类,比如LoginForm 2 前端的三种渲染方式: 渲染方式三种: 1 <form action="" novalidate met ...

  3. django项目基于钩子验证的注册功能

    前端html <div class="agile-row"> <h3>注册</h3> {# 注册的开始#} <div class=&quo ...

  4. 3- 功能2：基于forms组件和ajax实现注册功能

    1.forms组件的注册页面 url from django.urls import path, re_path from blog import views from django.views.st ...

  5. 基于forms组件和Ajax实现注册功能

    一.基于forms组件的注册页面设计 1.运用forms组件的校验字段功能实现用户注册 views.py:    (在钩子中代码解耦,将form放在cnblog/blog/Myforms.py中) f ...

  6. 2.1博客系统 |基于form组件和Ajax实现注册登录

    基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...

  7. BBS-基于forms组件和ajax实现注册功能

    http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...

  8. 基于struts2和hibernate的登录和注册功能——完整实例

    1.该项目使用MySQL数据库,数据库名为test,表名info,如图所示: 2.配置web.xml(Struts2使用) <?xml version="1.0" encod ...

  9. 基于vue开发的多功能的时间选择器组件，开箱即用

    好一段时间没有写过博客了,在国庆期间心血来潮优化了一个组件,在日常开发中时常会有需求用到时间选择器,不同的项目需求可能会不一样.近期开发的几个项目中就有需求用到这样的选择器,由于以前有用到相关的组件, ...

随机推荐

  1. [LeetCode] 126. 单词接龙 II

    题目链接 : https://leetcode-cn.com/problems/word-ladder-ii/ 题目描述: 给定两个单词(beginWord 和 endWord)和一个字典 wordL ...

  2. mongoose 数据库操作2

     mongoose的内置的主要功能解说 除了定义文档结构和你要存储的数据类型外.模式(Schema)还用于下面定义: ·        Validators (异步和同步) ·        Defa ...

  3. 剑指offer-动态规划-贪心算法--剪绳子-python

    题目描述 给你一根长度为n的绳子,请把绳子剪成m段(m.n都是整数,n>1并且m>1),每段绳子的长度记为k[0],k[1],...,k[m].请问k[0]xk[1]x...xk[m]可能 ...

  4. markdown编辑器学习

    markdown是一块文本编辑器,属于纯文本文件,可以使用任何编辑器打开.对于写作来说是一个好帮手,它的好处有很多,比如可以直接转成html,制作电子书等.今天开始学习一下这个神奇的编辑器.从今天起把 ...

  5. vue项目，webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  6. ELK7.X中配置x-pack

    ELK7.X中配置x-pack 1.X-Pack简介 X-Pack是一个Elastic Stack的扩展,将安全,警报,监视,报告和图形功能包含在一个易于安装的软件包中.虽然elasticsearch ...

  7. Java基础学习(1)

    Java基础知识 Java平台 1995年由Sun公司创建 Java的体系结构 JVM Java Virtue Machine Java代码的执行顺序 JDK Java Development Kit ...

  8. Linux用户的基本操作1 用户相关信息 及useradd /usermod 部分

    目录 linux 用户管理 - 用户的基本操作 用户管理 用户的相关命令 linux 用户管理 - 用户的基本操作 用户管理 1.什么是用户? 用户指的是能够正常登录Linux或windows系统 2 ...

  9. shell字符串拼接

    name="Shell" url="http://c.biancheng.net/shell/" str1=$name$url #中间不能有空格 str2=&q ...

  10. springboot自定义异常数据

    一.源码分析 自定义异常数据之前我们先看看一下源码             上述代码意思是如果你没有提供就使用springboot提供的类     这是springboot提供的异常属性类,我们想要自 ...