Django框架form表单配合ajax注册
总结一下，其实form组件的主要功能如下:
- 生成页面可用的HTML标签
- 对用户提交的数据进行校验
- 保留上次输入内容
下面是写的登录页面的实例
1:views视图中的代码
# 注册页面
def register(request):
if request.method == 'POST':
# 将提交过来的数据放的form表单中进行校验
form_obj = forms.Register(request.POST)
# 判断校验是否真确
print(form_obj.is_valid())
ret = {'status': False, 'msg': ''}
if form_obj.is_valid(): # 删除form_obj.cleaned_data中的确认密码
form_obj.cleaned_data.pop('re_password')
avatar = request.FILES.get('avatar')
models.UserInfo.objects.create_user(**form_obj.cleaned_data,avatar=avatar)
ret['status'] = True
ret['msg'] = '/index/'
return JsonResponse(ret)
else:
ret['msg'] = form_obj.errors return JsonResponse(ret)
form_obj = forms.Register()
return render(request, 'reg.html', {'form_obj': form_obj})
2:forms表单中的代码
"""
注册使用的form表单
"""
from django import forms
from blog import models class Register(forms.Form):
username = forms.CharField(
label='用户名:',
max_length=16,
error_messages={
'max_length': '用户名不能超过16位',
'required': '用户名不能为空'
},
widget=forms.widgets.TextInput(
attrs={'class': 'form-control'}
)
)
password = forms.CharField(
label='密码',
min_length=6,
error_messages={
'required': '密码不能为空',
'min_length': '密码不能少于6位',
},
widget=forms.widgets.PasswordInput(
attrs={'class': 'form-control'},
render_value=True
)
)
re_password = forms.CharField(
label='确认密码',
min_length=6,
error_messages={
'required': '确认密码不能为空',
'min_length': '确认密码不能少于6位',
},
widget=forms.widgets.PasswordInput(
attrs={'class': 'form-control'},
render_value=True
)
)
email = forms.EmailField(
label='邮箱',
error_messages={
'invalid': '邮箱格式错误',
'required': '邮箱不能为空',
},
widget=forms.widgets.EmailInput(
attrs={'class': 'form-control'}
)
) # 判断两次密码是否一致
def clean_re_password(self):
password = self.cleaned_data.get('password')
re_password = self.cleaned_data.get('re_password')
if password != re_password:
raise forms.ValidationError('两次密码不一致')
return re_password # 判断密码是否简单
def clean_password(self):
password = self.cleaned_data.get('password')
if password == '':
raise forms.ValidationError('密码太简单了')
return password # 判断用户名是否存在
def clean_username(self):
username = self.cleaned_data['username']
user_obj = models.UserInfo.objects.filter(username=username).first()
if user_obj:
raise forms.ValidationError('用户名已存在')
return username
3:HTML中的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mystyle.css">
</head>
<body> <div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form novalidate action="/reg/" method="post" class="form-horizontal reg-form "
enctype="multipart/form-data">
{% 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>
<div class="col-sm-8 ">
{{ form_obj.username }}
<span class="help-block"></span>
</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-8 ">
{{ form_obj.password }}
<span class="help-block"></span> </div>
</div> <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-8 ">
{{ form_obj.re_password }}
<span class="help-block"></span> </div>
</div> <div class="form-group">
<label for="{{ form_obj.email.id_for_label }}"
class="col-sm-2 control-label">{{ form_obj.email.label }}</label>
<div class="col-sm-8 ">
{{ form_obj.email }}
<span class="help-block"></span> </div>
</div> <div class="form-group">
<label for="id_avatars"
class="col-sm-2 control-label">头像</label>
<div class="col-sm-8">
<label for="id_avatars">
<img src="/static/img/default.png" alt="" id="avatar-img">
</label>
<input id="id_avatars" name="avatars" type="file" style="display: none">
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="reg-submit" type="button" class="btn btn-success">注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
4:ajax请求的代码
<script>
$('#reg-submit').on('click', function () {
// 上传带文件的ajax请求 需要将 data 类型 改为 FormData
var formData = new FormData();
formData.append('username',$("#id_username").val());
formData.append('password',$('#id_password').val());
formData.append('re_password',$("#id_re_password").val());
formData.append('email',$('#id_email').val());
formData.append('avatar',$('#id_avatars')[0].files[0]);
formData.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());
$.ajax({
url: '/reg/',
type: 'POST',
processData:false, // 文件上传必填的两项
contentType:false,
data: formData,
success: function (data) {
if (data.status) {
location.href = data.msg;
} else { $.each(data.msg,function (k,v) { //console.log ($('#id_'+k));
$('#id_'+k).next().text(v[0]).parent().parent().addClass('has-error')
})
}
}
})
});
// 获得焦点取消错误
$('form input').focus(function () {
$(this).next().text('').parent().parent().removeClass('has-error')
}); // 找到图片的input标签绑定change事件
$('#id_avatars').change(function () {
// 创建一个读取文件的对象
var fileReader = new FileReader();
// 1 取到当前选中的文件
fileReader.readAsDataURL(this.files[0]);
// 加载文件需要时间
fileReader.onload = function () {
// 加载完图片后添加到img标签中
$('#avatar-img').attr('src', fileReader.result);
}
});
</script>
5:最后效果图
Django框架form表单配合ajax注册的更多相关文章
- Django框架form表单的那些事儿
Form那些事儿 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1:initial 初始值,input框里面的初始值. class L ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- Django 11 form表单（状态保持session、form表单及注册实现）
Django 11 form表单(状态保持session.form表单及注册实现) 一.状态保持 session 状态保持 #1.http协议是无状态的:每次请求都是一次新的请求,不会记得之前通信的状 ...
- Django--分页器（paginator）、Django的用户认证、Django的FORM表单
分页器(paginator) >>> from django.core.paginator import Paginator >>> objects = ['joh ...
- 关于form表单或者Ajax向后台发送数据时，数据格式的探究
最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...
- 转载：Django之form表单
转载: 一.使用form类创建一个表单 先定义好一个RegForm类: forms.py from django import forms # 导入forms类 class NameForm(form ...
- form表单的ajax验证2
form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- Django的form表单
html的form表单 django中,前端如果要提交一些数据到views里面去,需要用到 html里面的form表单. 例如: # form2/urls.py from django.contrib ...
- laravel中form表单，ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
随机推荐
- PHP学习1.5-预定义超全局数组变量
1.PHP 预定义的超全局变量数组 特性: a.特殊的数组,操作方式没有区别 b.不用声明,php脚本中默认存在,因为在php中不用定义,所以在自定义变量是应避免和预定的全局变量同名 c.在全局范围内 ...
- TZ_02MyBatis_lazy SqlMapConfig.xml
Mybatis的延迟加载又称为懒加载 mybatis在一对多的查询中,例如查询一个用户时需要查询这个用户下的所有账户信息,如果一次性的select * from user u left join ac ...
- 不同尺寸设计图 rem 断点数据记录
320px宽的设计图 @media screen and (min-width: 320px) { html { font-size: 100px; } } @media screen and (mi ...
- 20190828 [ Night ] - 弋
半集训可还行…… 半集训第一次模拟 考试过程 好像是上回的同套题. ××内个$\text{english}$真毒瘤 T1 什么玩意? $chinese$? 前面两句背景是个? 需要$\Theta(1) ...
- Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---命令模式之SimpleRemoteWithUndoTest[转]
命令模式可以很轻松的实现撤销(Undo)功能. 命令的接受者: 1unit uReceiveObject; 2 3interface 4 5type 6 TLight = class(T ...
- LINNX查看当前登录的用户
W w命令主要是查看当前登录的用户,这个命令相对来说比较简单.我们来看一下截图. 在上面这个截图里面呢,第一列user,代表登录的用户,第二列,tty代表用户登录的终端号,因为在linux中并不是只有 ...
- linux系统级别的计划任务及其扩展anacrontab
这个是系统设置好了,清理系统垃圾或者是自动执行某些脚本的系统任务,一般我们做了解就行了,不要更改配置文件是/etc/conrtab SHELL:就是运行计划任务的解释器,默认是bash PATH:执行 ...
- LINUX常见服务列表
服务名 必需(是/否)用途描述 注解 acon 否 语言支持 特别支持左手书写语言:阿拉伯语,波斯语和希伯莱语 acpi ...
- BZOJ1452 [JSOI2009]Count [2017年4月计划 树状数组02]
1452: [JSOI2009]Count Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2419 Solved: 1403[Submit][Stat ...
- win10 请求操作需要提升解决方案
记录一下: win10 系统管理员 打开后缀为 .xxx 的文件时, 系统提示: 请求操作需要提升 网上搜索了一下,原因是权限不够,故系统提示. 给当前用户加入了 管理员权限,各种权限都无效. ...