基于modelform和ajax的注册
forms文件
创建ModelForm组件
from django import forms
from crm import models
from django.core.exceptions import ValidationError
import hashlib #注册form
class RegForm(forms.ModelForm):
#添加确认密码 按照form组件的样式写
password = forms.CharField(widget=forms.PasswordInput(),required="不能为空",label="密码22",min_length="")
re_password = forms.CharField(widget=forms.PasswordInput(),label="确认密码",min_length="") class Meta:
#指定关联的model
model=models.UserProfile #要展示的内容
# fields="__all__" #展示所有的字段
# exclude=["is_active"] #排除这个字段 #或者指定要显示的字段 决定了在页面上的显示顺序 *** 即使是自定义的re_password也可以写进来
fields=["username","name","password","re_password","department","mobile"] #这个label的注释直接在modelform中改 或者 在model中写verbose_name="用户名"
#这设置的label只对models里的字段起作用, 自己定义的re_password 不起作用
labels={ #全局设置, 没有加label的字段就还是按数据库里的字段名
"username":"用户名",
"password":"密码",
"name":"姓名",
"department":"部门",
} widgets = {
# "password":forms.PasswordInput(attrs={"class":"form-control"}) #密码显示密文
} # 单加的报错 只对title做设置
error_messages = {
"username":{"required":"不能为空","invalid":"格式错误"},
"department":{"required":"不能为空"},
"mobile":{"required":"不能为空"},
} ##初始化把样式调出来
def __init__(self,*args,**kwargs):
super().__init__(*args,**kwargs)
#调节样式
print(self.fields) #拿到的是对象
for field in self.fields.values(): #field 是取出来的对象
field.error_messages={"required":"不能为空"}#批量处理
field.widget.attrs.update({"class":"form-control"}) def clean(self): #两次密码校验
pwd = self.cleaned_data.get("password")
re_pwd = self.cleaned_data.get("re_password")
print(self.cleaned_data)
if pwd == re_pwd and pwd: #如果密码和确认密码一致, 并且存在
# 两次密码一致 之后对密码进行加密
md5 = hashlib.md5() # MD5对象
md5.update(pwd.encode("utf-8")) #加密结果
pwd = md5.hexdigest()
print(pwd) #3c4423d6a2f6dfcac2ad6f6d1981ad35
self.cleaned_data["password"] = pwd
print("-->",self.cleaned_data)
#{'username': 'sanjiang@qq.com', 'name': 'sanjiang', 'password': '3c4423d6a2f6dfcac2ad6f6d1981ad35', 're_password': 'sanjiang', 'department': <Department: 销售部>, 'mobile': None}
return self.cleaned_data
else:
self.add_error("re_password","两次密码不一致") #把错误提示加到re_password 容易取值
raise ValidationError("两次密码不一致") #错误提示加到了所有的错误里了不容易取值
在views文件中利用modelform实例化
from django.shortcuts import render,HttpResponse,redirect
from crm.models import UserProfile
from crm.forms import RegForm
from django.http import JsonResponse #注册 用ModelForm 和ajax
def reg(request):
form_obj = RegForm() if request.method=="POST":
form_obj = RegForm(request.POST) #用RegForm做校验 res = {"user":None,"err_msg":""}
if form_obj.is_valid(): #通过校验
print('通过校验')
print(form_obj.cleaned_data)
#{'username': 'sanjiang@qq.com', 'name': 'sanjiang', 'password': '3c4423d6a2f6dfcac2ad6f6d1981ad35', 're_password': 'sanjiang', 'department': <Department: 销售部>, 'mobile': None} res["user"] = form_obj.cleaned_data.get("username") # 写入数据到数据库
form_obj.cleaned_data.pop("re_password") #把re_password删除 因为没有在models的字段里
# print(form_obj.cleaned_data)
obj = UserProfile.objects.create(**form_obj.cleaned_data)
# print(obj) else:
# print("错误信息:",form_obj.errors)
# print("部分干净信息:",form_obj.cleaned_data)
res["err_msg"] = form_obj.errors
return JsonResponse(res) return render(request,"reg.html",{"form_obj":form_obj})
注册的html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %}">
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 70px">
<div class="col-sm-6 col-sm-offset-3">
<form class="form-horizontal" method="post" action="" novalidate>
{# {{ form_obj.as_p }}#}
{% csrf_token %}
{# <div class="form-group">#}
{# <label for="{{ form_obj.username.id_for_label }}"#}
{# class="col-sm-2 control-label">{{ form_obj.username.label }}</label>#}
{# {{ form_obj.username.id_for_label }} 作用就是点击对应的label"用户名" 光标会自动聚焦在这个数入框 #}
{# {{ form_obj.username.label }} 作用 显示对应的中文名称 #}
{# <div class="col-sm-10">#}
{# {{ form_obj.username }}#}
{# {{ form_obj.username }} 生成一个username的input输入框 #}
{# {{ form_obj.username.errors.0 }}#}
{# 错误提示#}
{# </div>#}
{# </div>#}
{##}
{# <div class="form-group">#}
{# <label for="{{ form_obj.password.id_for_label }}"#}
{# class="col-sm-2 control-label">{{ form_obj.password.label }}</label>#}
{# <div class="col-sm-10">#}
{# {{ form_obj.password }}#}
{# {{ form_obj.password.errors.0 }}#}
{# </div>#}
{# </div>#}
{##}
{# <div class="form-group">#}
{# <label for="{{ form_obj.name.id_for_label }}"#}
{# class="col-sm-2 control-label">{{ form_obj.name.label }}</label>#}
{# <div class="col-sm-10">#}
{# {{ form_obj.name }}#}
{# {{ form_obj.name.errors.0 }}#}
{# </div>#}
{# </div>#}
{##}
{# <div class="form-group">#}
{# <label for="{{ form_obj.department.id_for_label }}"#}
{# class="col-sm-2 control-label">{{ form_obj.department.label }}</label>#}
{# <div class="col-sm-10">#}
{# {{ form_obj.department }}#}
{# {{ form_obj.department.errors.0 }}#}
{# </div>#}
{# </div>#}
{# igcrm 中写的 循环取值展示#}
{% for field in form_obj %}
<div class="form-group">
<label for="">{{ field.label }}</label>
{{ field }}
<span class="error pull-right">{{ field.errors.0 }}</span>
{# 显示错误信息#}
</div>
{% endfor %}
{# 额外添加的确认密码 #}
{# <div class="form-group">#}
{# <label for="{{ form_obj.re_password.id_for_label }}"#}
{# class="col-sm-2 control-label">{{ form_obj.re_password.label }}</label>#}
{# <div class="col-sm-10">#}
{# {{ form_obj.re_password }}#}
{# {{ form_obj.re_password.errors.0 }}#}
{# </div>#}
{# </div>#}
{# <div class="form-group">#}
{# <div class="col-sm-offset-2 col-sm-10">#}
{# <button type="submit" class="btn btn-default">Sign in</button>#}
{# </div>#}
{# </div>#}
{# <input type="submit" class="btn btn-primary pull-left" id="reg_btn" value="注册">#} 发送ajax请求的时候就不能再使用submit类型了
<input type="button" class="btn btn-primary pull-left" id="reg_btn" value="注册">
</form>
</div>
</div>
</div>
<script src="/static/js/jquery.js"></script>
<script>
$("#reg_btn").click(function(){
{#alert("绑定成功");#}
$.ajax({
url:"",
type:"post",
data:{
username:$("#id_username").val(),
name:$("#id_name").val(),
password:$("#id_password").val(),
re_password:$("#id_re_password").val(),
department:$("#id_department").val(),
mobile:$("#id_mobile").val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
success:function(res){
console.log('');
{#console.log(res);#}
if(res.user){
//注册成功
alert("注册成功");
location.href="/login/"
}else{
//清除错误
console.log('aaaa')
$(".error").html("");
$(".form-group").removeClass("has-error");
//展示新错误
$.each(res.err_msg,function(i,j){
console.log(i,j);
$("#id_"+i).next().html(j[0]).css("color","red").parent().addClass("has-error")
})
}
},
})
})
</script>
</body>
</html>
基于modelform和ajax的注册的更多相关文章
- 2.1博客系统 |基于form组件和Ajax实现注册登录
基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...
- 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 ...
- 基于 Django的Ajax实现 文件上传
---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...
- BBS-基于forms组件和ajax实现注册功能
http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...
- [实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册
写在前面 今天贴合到实际的客户需求仔细的想了下,其实在userInfo这个类里面很多字段都不是必须的.有很多的事业单位根本就不能上网,填写的邮箱也是exchange的,个人的详细信息都在ad里面可以取 ...
- 基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- 源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
随机推荐
- Asp.net MVC Razor输出字符串方法（js中嵌入razor）
@{ Model p = new Model(); //输出名称和年龄 //1.第一种方式 @:姓名=@p.Name //2.第二中方式 <text>年龄=</text>p.A ...
- Web前端开发人员实用Chrome插件收集
越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...
- .net core注入服务
1.在Startup的ConfigureServices里面,通过IServiceCollection进行注入 public void ConfigureServices(IServiceCollec ...
- WPF 用代码调用dynamic resource动态更改背景 - CSDN博客
原文:WPF 用代码调用dynamic resource动态更改背景 - CSDN博客 一般dynamic resoource通常在XAML里调用,如下范例: <Button Click=&qu ...
- 使用path制作各类型动画路径
原文:使用path制作各类型动画路径 <Window x:Class="使用path制作各类型动画路径.MainWindow" xmlns="http://sche ...
- Android项目实战（四十）：在线生成按钮Shape的网站
原文:Android项目实战(四十):在线生成按钮Shape的网站 AndroidButton Make 右侧设置按钮的属性,可以即时看到效果,并即时生成对应的.xml 代码,非常高效(当然熟练的话 ...
- C#数字图像处理时注意图像的未用区域
原文:C#数字图像处理时注意图像的未用区域 图1. 被锁定图像像素数组基本布局 如图1所示,数组的宽度并不一定等于图像像素数组的宽度,还有一部分未用区域.这是为了提高效率,系统要确定每 ...
- 数据库的事务日志已满,起因为"LOG_BACKUP"。
问题描述: 数据库的事务日志已满,起因为"LOG_BACKUP". 问题截图: 解决方法: 1).选择数据库–属性—选项—恢复模式–选择简单.2).收缩数据库后,再调回完整. US ...
- LINQ查询表达式---------group子句
LINQ查询表达式---------group子句 LINQ表达式必须以from子句开头,以select或group子句结束.使用guoup子句来返回元素分组后的结果.group 子句返回一个 IGr ...
- ReportViewer，RDLC 报表开发之个性化样式
原文:ReportViewer,RDLC 报表开发之个性化样式 报表开发中,客户对样式提出了要求: 1.工具栏上显示每页条数 2.只导出Excel,不需要下拉菜单. 3.报表上显示的图表,分页时,每页 ...