基于modelforms组件实现注册功能
数据库部分
使用的是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组件实现注册功能的更多相关文章
- day 77 基于form组件的注册功能
Form 表单 py文件 from django import forms #定义一个form类注册用 class RegForm (forms.Form): username =forms.Char ...
- Django基于form组件实现注册校验
一 基本流程 1 创建form组件对应的类,比如LoginForm 2 前端的三种渲染方式: 渲染方式三种: 1 <form action="" novalidate met ...
- django项目基于钩子验证的注册功能
前端html <div class="agile-row"> <h3>注册</h3> {# 注册的开始#} <div class=&quo ...
- 3- 功能2：基于forms组件和ajax实现注册功能
1.forms组件的注册页面 url from django.urls import path, re_path from blog import views from django.views.st ...
- 基于forms组件和Ajax实现注册功能
一.基于forms组件的注册页面设计 1.运用forms组件的校验字段功能实现用户注册 views.py: (在钩子中代码解耦,将form放在cnblog/blog/Myforms.py中) f ...
- 2.1博客系统 |基于form组件和Ajax实现注册登录
基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...
- BBS-基于forms组件和ajax实现注册功能
http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...
- 基于struts2和hibernate的登录和注册功能——完整实例
1.该项目使用MySQL数据库,数据库名为test,表名info,如图所示: 2.配置web.xml(Struts2使用) <?xml version="1.0" encod ...
- 基于vue开发的多功能的时间选择器组件，开箱即用
好一段时间没有写过博客了,在国庆期间心血来潮优化了一个组件,在日常开发中时常会有需求用到时间选择器,不同的项目需求可能会不一样.近期开发的几个项目中就有需求用到这样的选择器,由于以前有用到相关的组件, ...
随机推荐
- [LeetCode] 126. 单词接龙 II
题目链接 : https://leetcode-cn.com/problems/word-ladder-ii/ 题目描述: 给定两个单词(beginWord 和 endWord)和一个字典 wordL ...
- IntelliJ IDEA中创建Web聚合项目(Maven多模块项目)（转载）
创建parent项目 1.打开IDEA,注意这里不要勾选模板,用模板创建过maven项目的小伙伴都知道模板创建项目非常慢,所以这里不要选模板,需要的文件夹我们后面自己来创建就可以了.所以这个页面直接点 ...
- 搜索专题： HDU1027Ignatius and the Princess II
Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ( ...
- 基于 Redux + Redux Persist 进行状态管理的 Flutter 应用示例
好久没在 SegmentFault 写东西,唉,也不知道 是忙还是懒,以后有时间 再慢慢写起来吧,最近开始学点新东西,有的写了,个人博客跟这里同步. 一直都在自己的 React Native 应用中使 ...
- Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题
Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过importa ...
- 如何获取图片的base64编码
1.准备一张图片,比如1.gif 2.使用chrome浏览器,新建立一个窗口,然后将a.png拖动至浏览器窗口里面,打开控制台(检查),最后点击source 3.使用方法: 注意source获取的一串 ...
- linux基本命令vi和vim使用详细介绍
vi使用方法详细介绍 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版 ...
- python-xss攻击和单例模式
1.python中单例模式 class Foo: instance = None def __new__(cls, *args, **kwargs): if not Foo.instance: Foo ...
- PAT Advanced 1001 A+B Format (20 分)
Calculate a+b and output the sum in standard format -- that is, the digits must be separated into gr ...
- mysql 分页查询及优化
1.分页查询 select * from table limit startNum,pageSize 或者 select * from table limit pageSize offset star ...