前端html

<div class="agile-row">
<h3>注册</h3>
{# 注册的开始#}
<div class="login-agileits-top">
<div class=row>
<form class="form-horizontal col-md-8 form-padding" role=form id=registerForm method=post
onsubmit="return false">
{% csrf_token %}
<div class="form-space-top d-none d-sm-block"></div>
<div class="form-group form-row">
<div class="col-sm-2 control-label"><label class=w4-2 for=Email></label></div>
<div class="col-sm-10 has-feedback"><input class=form-control placeholder=邮箱:可通过邮箱找回密码
type=email
data-val=true
data-val-checkemailpostfix=不支持该邮箱后缀
data-val-email=邮箱格式错误
data-val-length=邮箱地址不能超过120个字符
data-val-length-max=120
data-val-regex=邮箱地址错误或不支持
data-val-regex-pattern="[\w!#\$%&amp;'\*\+\-\/=\^_`{\|}~.]+@([\w-]+\.)+(com|net|cn|org|me|cc|biz)$"
data-val-remote="'邮箱' is invalid."
data-val-remote-additionalfields=*.Email
data-val-remote-url=/Account/CheckEmail
data-val-required=请输入邮箱地址 id=Email
name=member_email> <span
class="text-danger field-validation-valid" data-valmsg-for=Email
data-valmsg-replace=true></span></div>
</div>
<div class="form-group form-row">
<div class="col-sm-2 control-label"><label class=w4-4 for=PhoneNum>手机号码</label></div>
<div class="col-sm-10 has-feedback">
<div class=mobile-control-wrap><input style="display: none;" class="form-control country-code" type=text data-val=true
data-val-maxlength=国家代码格式错误 data-val-maxlength-max=4
data-val-regex=国家代码格式错误 data-val-regex-pattern=^\+\d{1,3}$
data-val-required=请输入国家代码 id=CountryCode name=CountryCode
value=+86> <input class="form-control mobile-num"
placeholder=绑定你的手机号 type=text
data-val=true data-val-regex=手机号码有误
data-val-regex-pattern=^\d{4,13}$
data-val-remote="'手机号码' is invalid."
data-val-remote-additionalfields=*.PhoneNum
data-val-remote-url=/Account/CheckPhoneNum
data-val-required=请输入手机号码 id=PhoneNum
name=member_tel></div>
<span class="text-danger field-validation-valid" data-valmsg-for=CountryCode
data-valmsg-replace=true></span> <span
class="text-danger field-validation-valid"
data-valmsg-for=PhoneNum
data-valmsg-replace=true></span></div>
</div>
<div class="form-group form-row">
<div class="col-sm-2 control-label"><label class=w4-4 for=LoginName>登录名称</label></div>
<div class="col-sm-10 has-feedback"><input class=form-control placeholder=登录用户名,不少于4个字符
type=text
data-val=true
data-val-length=不合要求,至少2个字符,最多30个字符
data-val-length-max=30 data-val-length-min=2
data-val-nospace=登录用户名不能包含空格
data-val-remote="'登录名称' is invalid."
data-val-remote-additionalfields=*.LoginName
data-val-remote-url=/Account/CheckLoginName
data-val-required=请输入登录用户名 id=LoginName
name=member_name>
<span class="text-danger field-validation-valid" data-valmsg-for=LoginName
data-valmsg-replace=true></span></div>
</div>
<div class="form-group form-row">
<div class="col-sm-2 control-label"><label class=w4-4 for=DisplayName>显示名称</label></div>
<div class="col-sm-10 has-feedback"><input class=form-control placeholder=即昵称,不少于2个字符
type=text
data-val=true
data-val-length=不合要求,至少2个字符,最多20个字符
data-val-length-max=20 data-val-length-min=2
data-val-regex=不能包含空格、@、:和,不能以._结尾
data-val-regex-pattern=^(?!.*[@::\s]).*[^._]$
data-val-remote="'显示名称' is invalid."
data-val-remote-additionalfields=*.DisplayName
data-val-remote-url=/Account/CheckDisplayName
data-val-required=请输入显示名称 id=DisplayName
name=member_nickname> <span
class="text-danger field-validation-valid" data-valmsg-for=DisplayName
data-valmsg-replace=true></span></div>
</div>
<div class="form-group form-row">
<div class="col-sm-2 control-label"><label class=w4-2 for=Password>密码</label></div>
<div class="col-sm-10 has-feedback"><input class=form-control
placeholder=至少8位,必须包含字母、数字、特殊字符
type=password data-val=true
data-val-length=不合要求,密码长度要求8-30位
data-val-length-max=30
data-val-length-min=8
data-val-nospace=密码不能包含空格
data-val-regex=密码必须包含字母、数字和特殊字符的组合
data-val-regex-pattern="^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])[-0-9a-zA-Z~!@#$%^&amp;*`_=+\]\[{}:;\\|:;"'/?>.&lt;,\(\)]{8,30}$"
data-val-required=请输入密码 id=Password
name=member_pwd> <span
class="text-danger field-validation-valid" data-valmsg-for=Password
data-valmsg-replace=true></span></div>
</div>
<div class="form-group form-row">
<div class="col-sm-2 control-label"><label class=w4-4 for=ConfirmPassword>确认密码</label>
</div>
<div class="col-sm-10 has-feedback"><input class=form-control placeholder=请输入确认密码
type=password
data-val=true data-val-equalto=确认密码错误
data-val-equalto-other=*.Password
id=ConfirmPassword
name=r_pwd> <span
class="text-danger field-validation-valid" data-valmsg-for=ConfirmPassword
data-valmsg-replace=true></span></div>
</div>
<div class="form-group form-row"> </div>
<div class="form-group form-row">
<div class="offset-sm-2 col-sm-10"><span class="col-sm-12 ajax-error"></span> <button id=submitBtn type=submit
class="btn ladda-button mx-auto d-block cnblogs-btn-blue"
data-style=zoom-in><span class=ladda-label>注册</span></button> </div>
</div> <div class="offset-sm-2 register-sign"><span class=asterisk>*</span> 点击 “注册” 按钮,即表示您同意并愿意遵守
<a
class=look-agreeon target=_blank
href=//passport.cnblogs.com/agreement.html>用户协议</a>。
</div> </form>
</div>
</div>
{#注册的表单结束#}
</div>

前端jquery

{#注册的jquery#}
$(document).ready(function () {
//当点击注册按钮时候,把form表单里的内容提交到后台
$("#submitBtn").click(function () {
$.post("/blog/regist/", $('#registerForm').serialize(), function (data) {
if (data.status == 0) {
arr = {
'member_name': '登录名称',
'member_nickname': '显示名称',
'member_pwd': '密码',
'r_pwd': '确认密码',
'member_email': '邮箱',
'member_tel': '手机号码',
'__all__': ''
};
$.each(data['info'], function (key, value) { //遍历键值对
console.log(key);
console.log(value[0]);
layer.msg(arr[key] + value[0]);
return false;
layer.msg(arr[key] + data['info'][key]);
return false;
});
} else if (data.status == 1) {
layer.msg(data['info'], function () {
location.href = "{% url 'index' %}";
});
} else {
layer.msg(data['info']);
} }, 'json');
});
});
{#注册的jquery结束#}

后台路由

# 注册
path('regist/', login.regist,name='regist'),

写钩子验证:项目目录下创建my_forms.py文件

from django import forms  #自动验证 # forms组件
from django.forms import widgets
from django.core.exceptions import ValidationError
from django.core.validators import RegexValidator from blog.models import Member
class UserForm(forms.Form):
wid_01 = widgets.TextInput(attrs={"class": "form-control"})#<input type='text' class="form-control">
wid_02 = widgets.PasswordInput(attrs={"class": "form-control"})#<input type='password' class="form-control">
member_name=forms.CharField(max_length=60,min_length=4,label="用户名",widget=wid_01,error_messages={"required":"该字段必填"})
member_nickname = forms.CharField(max_length=60, min_length=2, label="显示名称", widget=wid_01,
error_messages={"required": "该字段必填"})
member_pwd=forms.CharField(max_length=30,min_length=8,label="密码",widget=wid_02,validators=[RegexValidator('\d+','只能是数字') ],error_messages={'required': '密码不能为空','min_length': '密码长度不能小于8','max_length': '密码长度不能大于18','invalid': '密码格式错误',})
r_pwd=forms.CharField(max_length=30,min_length=8,label="确认密码",widget=wid_02,validators=[RegexValidator('\d+','只能是数字') ],error_messages={'required': '密码不能为空','min_length': '密码长度不能小于8','max_length': '密码长度不能大于18','invalid': '密码格式错误',}) #/(?=.*[a-z])(?=.*\d)(?=.*[#@!~%^&*])[a-z\d#@!~%^&*]{8,16}/i
member_email = forms.EmailField(label="邮箱",widget=wid_01,error_messages={"required":"该字段必填","invalid":"格式不正确"})
member_tel = forms.CharField(max_length=11, widget=wid_01,label="电话号码",) # 局部钩子
def clean_member_name(self):
val = self.cleaned_data.get("member_name")
res = Member.objects.filter(member_name=val)
if not res:
return val
else:
raise ValidationError("用户名已存在!")
# 全局钩子
def clean(self):
member_pwd=self.cleaned_data.get("member_pwd")
r_pwd=self.cleaned_data.get("r_pwd")
if member_pwd and r_pwd:
if member_pwd==r_pwd:
# print(self.cleaned_data)
return self.cleaned_data
else:
raise ValidationError('两次密码不一致!')
else:
return self.cleaned_data

后台方法

from blog.my_forms import *

# 注册页
def regist(request):
res = {'status': None, 'info': None}
if request.method == "POST":
form = UserForm(request.POST)
if not form.is_valid():
res['status'] = 0
res['info'] = form.errors
return HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax member_name = request.POST.get("member_name")
member_nickname = request.POST.get("member_nickname")
member_pwd = make_password(request.POST.get("member_pwd"))
member_email = request.POST.get("member_email")
member_tel = request.POST.get("member_tel")
old_member_obj = Member.objects.filter(member_tel=member_tel)
if old_member_obj:
res['status'] = 3
res['info'] = '手机号已注册'
return HttpResponse(json.dumps(res))
member_obj = Member.objects.create(member_name=member_name, member_nickname=member_nickname,
member_pwd=member_pwd, member_email=member_email, member_tel=member_tel) if member_obj:
# res = {'status': 1, 'info': '登录成功'}
res['status'] = 1
res['info'] = '注册成功,即将跳转至首页'
else:
res['status'] = 2
res['info'] = '发生了一个意料之外的错误,注册失败' response_new = HttpResponse(json.dumps(res)) # 把这个结果告诉给前台,ajax
# response_new.set_cookie("member_id",member_obj.member_id)#设置cookie
# response_new.set_cookie("member_name", member_obj.member_name) # session
request.session['member_id'] = member_obj.member_id
request.session['member_name'] = member_obj.member_name # response_new.set_cookie("member_id", member_obj.member_id, expires = 60 * 60 * 24 * 7) return response_new
return render(request, 'blog/regist.html')

页面效果

done。

django项目基于钩子验证的注册功能的更多相关文章

  1. Django项目: 4.用户登录登出功能

    用户登录登出功能 一.功能需求分析 1. 登录退出功能分析 流程图 功能 登录页面 登录功能 退出功能 二.登录页面 1. 接口设计 接口说明 类目 说明 请求方法 GET url定义 /user/l ...

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

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

  3. 一个关于vue+mysql+express的全栈项目(三)------ 登录注册功能的实现(已经密码安全的设计)

    本系列文章,主要是一个前端的视角来实现一些后端的功能,所以不会讲太多的前端东西,主要是分享做这个项目学到的一些东西,,,,, 好了闲话不多说,我们开始搭建后端服务,这里我们采用node的express ...

  4. 潭州课堂25班:Ph201805201 django 项目 第十五课 用户注册功能后台实现 (课堂笔记)

    前台:判断用户输入 ,确认密码,手机号, 一切通过后向后台发送请求, 请求方式:post 在 suers 应用下的视图中: 1,创建个类, 2,创建 GET 方法,宣言页面 3,创建  POST 方法 ...

  5. 基于modelforms组件实现注册功能

    数据库部分 使用的是auth_user表,添加r_pwd字段后表名变为UserInfo from django.db import models from django.contrib.auth.mo ...

  6. django项目中使用邮箱找回密码功能

    本文使用qq邮箱,需要登录邮箱,在设置-账户里面开启SMTP服务,要记下授权码 前端html {#找回密码的表单#} <form action="" method=" ...

  7. ThinkPHP表单自动验证(注册功能)

    控制器中: 模型中: 视图中:

  8. Django项目:CRM(客户关系管理系统)--53--44PerfectCRM实现账号快速注册登陆

    # gbacc_ajax_urls.py # ————————42PerfectCRM实现AJAX全局账号注册———————— from django.conf.urls import url fro ...

  9. Django项目:CRM(客户关系管理系统)--61--51PerfectCRM实现CRM客户报名流程学生合同上传照片

    # sales_views.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.db import IntegrityError # 主动 ...

随机推荐

  1. 〓经典文字MUD武侠游戏 我的江湖 〓

    〓经典文字MUD武侠游戏 我的江湖 〓 我的江湖(FFLIB)基于地狱内核扩展,目前已扩展了很多实用功能! 我的江湖玩法 和掌心西游.书剑.东方故事.侠缘.武林等玩法大同小异 但扩展了更多好玩的玩法, ...

  2. GK_Zone与GK_CM的区别

    北京54坐标系3度投影带是从东经1度30秒经线开始,按经差3度为一个投影带自西向东划分,全球共分120个投影带.为了便于地形图的测量作业,在高斯-克吕格投影带内布置了平面直角坐标系统,具体方法是,规定 ...

  3. 【maven学习】构建maven web项目

    Maven Web应用 创建Web应用程序 要创建一个简单的java web应用程序,我们将使用Maven的原型 - web应用插件.因此,让我们打开命令控制台,进入到C: MVN目录并执行以下命令m ...

  4. spark 提交任务报错 Yarn application has already ended! It might have been killed or unable to launch application master

    1.任务是提交在yarn上的,查看 resourceManager页面 有如下信息 Current usage: 58.4 MB of 1 GB physical memory used; 2.2 G ...

  5. SpringBoot加载自定义yml文件

    自定义配置文件(跟SpringBoot的application.yml同一目录下): nlu-parse-rule: title: "NLU响应结果解析规则" desc: &quo ...

  6. PB 点击标题行排序和双击打开编辑页面共存不冲突的方法

    根据doubleclicked() 事件的参数 row 进行判断 大于0才进入编辑页面(不能用getrow()事件获取行id,双击标题行获取的是1) if row>0 then event ue ...

  7. 【题解】Luogu P1357 花园

    原题传送门 我们先将花圃断环为链,并将\([1,m]\)复制一份到\([n+1,n+m]\),最后要求\([1,n+m]\)是合法序列且\([1,m]\)与\([n+1,n+m]\)相等的序列的数量即 ...

  8. Hive学习笔记(一)——概述

    1.Hive是个什么玩意? Hive:由Facebook开源用于解决海量结构化日志的数据统计. Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据(有规律的数据)文件映射为一张表,并提供 ...

  9. RSA非对称 私钥加密

    RSA生成公钥和私钥对 /// <summary> /// RSA生成公钥和私钥 /// </summary> /// <returns></returns& ...

  10. ASP.NET SignalR 系列(四)之指定对象推送

    在上一章讲到了广播推送,即所有订阅的用户都能收到,这种适合于信息广播. 接下来介绍如何给指定的对象推送 在讲这个之前先说明一下连接创建的基础知识 1.每个页面与服务端创建连接并启动时,这时服务端会产生 ...