数据库部分

使用的是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. [BZOJ3133] [Baltic2013]ballmachine(树上倍增+堆)

    [BZOJ3133] [Baltic2013]ballmachine(树上倍增+堆) 题面 有一个装球机器,构造可以看作是一棵树.有下面两种操作: 从根放入一个球,只要下方有空位,球会沿着树滚下.如果 ...

  2. win10上的Django项目实现内网映射

    网上有很多关于django项目发布uwsgi模块在 windows上的下载以及安装过程, 可是他们也并没有真正的在windows上使用到这个模块(至少目前在网上还没看到过), 而大部分人就是在Djan ...

  3. Node.js+webSocket

    // 引入WebSocket模块 var ws = require('nodejs-websocket') var PORT = 3030 var server = ws.createServer(f ...

  4. SCUT - 482 - 生成树上的点 - Prufer

    https://scut.online/p/482 没听说过这个东西. 洛谷也有这个,所以还是要去接触一些奇奇怪怪的知识才行. https://www.luogu.org/problem/P2290 ...

  5. gulp程序怎么跑起来 及 使用中遇到的常见错误

    gulp常见问题 问题一:Error: cannot find module 'gulp-concat' #16 解答:需要先npm install,然后执行gulp gulp安装及使用 一.安装no ...

  6. react随笔

    对React children 的深入理解     https://www.jianshu.com/p/d1975493b5ea [react]利用prop-types第三方库对组件的props中的变 ...

  7. tomcat 启动日志乱码，idea中运行Tomcat也出现中文乱码：“淇℃伅”

    打开到tomcat安装目录下的conf/文件夹 修改logging.properties文件, 找到 java.util.logging.ConsoleHandler.encoding = utf-8 ...

  8. 2019-8-31-MobaXterm-使用代理

    title author date CreateTime categories MobaXterm 使用代理 lindexi 2019-08-31 16:55:58 +0800 2018-02-13 ...

  9. linux 源码安装postgresql

    下载源码包 --安装所需要的系统软件包 yum groupinstall -y "Development tools" yum install -y bison flex read ...

  10. 007-流程控制 if 语句

    流程控制 if 语句 if [ 条件判断式 ] ; then 程序 fi if [ 条件判断式 ] then 程序 fi 脚本示例: [root@zabbix lianxi]# .sh #!/bin/ ...