数据库部分

使用的是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. Luogu P2168 [NOI2015]荷马史诗

    题目 哈夫曼树的每个叶子结点都有一个权值(表示某数据的出现频率),且\(\sum dis_ival_i\)最小. 哈夫曼树中,权值和越大的集合离根节点越近. 而每个数据对应从根节点到该叶子结点的一种编 ...

  2. PY个快速模

    既然这道题是数学题,那就用 PY 吧! 学点东西: print 可以和 c++ 中的 printf 一样快乐的输出格式 另外一点: 这道题可能数据不够强?想想应该有一个 \(0^0 ~\%~ k =0 ...

  3. 打印Java main参数

    public class Main { public static void main(String args[]){ System.out.println("打印main方法中的输入参数, ...

  4. 绝对定位left:50% 隐式设置了宽度

    绝对定位left:50% 隐式设置了宽度 不定宽高的盒子如何在父盒子中垂直居中,我们常做的一种方式便是 left: 50%; top: 50%; transform: translate(-50%, ...

  5. Prometheus 2.14.0 新特性

    Prometheus 2.14.0 现在(2019.11.11)已经发布,在上个月的 2.13.0 之后又进行了一些修正和改进. 这次最大的新功能是基于 React 的新 UI,与现有 UI 大体相同 ...

  6. 【COSMOS】跨链协议IBC概述

    一.什么是IBC? IBC是链间通信协议的缩写(Inter-Blockchain Communication Protocol).通过数据包交换在多个不同的区块链网络之间转移数据和状态信息.最初的用途 ...

  7. vue项目1-pizza点餐系统9-axios实现数据存储

    一.安装.引入axios 1.终端输入cnpm install axios 2.在main.js中引入 import axios from ‘axios’ 3.配置路径 axios.defaults. ...

  8. 关于ES6的新特性

    1  let声明变量 01    let声明的变量,不可重复声明,比如 let   a=1  : let   a=2 :这样申明会报错 02    let声明的变量,有块级作用域,比如  if( ){ ...

  9. CentOS7编译安装MySQL8.0

    1.下载mysql8.0.16源码包和cmake源码包 cd /usr/local/srcwget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-b ...

  10. java File获取字节流

    /*文件64位编码*/ public static void main(String[] args) { byte[] fileByte = toByteArray(newFile); String ...