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' ...
随机推荐
- SmartSQL
- 一探前端开发中的JS调试技巧（转）
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
- JQ效果 透明图片覆盖动画
效果图呈上 先说思路 1,一个固定的框架,有两张图片,一张是狗狗的,一张是练习方式,想把做好的练习方式隐藏 2,效果上想要从下面滑动出来,所以透明框定位在下面 3,整理需要的东西,缓慢升起需要动画效果 ...
- html5的离线存储问题集合
HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...
- Qt: error lnk1158 无法运行rc.exe
解决办法:(依据自己的环境而定) 将C:\Program Files (x86)\Windows Kits\\bin\10.0.15063.0\x64 目录下的rc.exe 和rcdll.dll 复制 ...
- MySQL与PostgreSQL比较 哪个数据库更好
最后结论说的好,通常由团队成员的熟悉度来决定: PostgreSQL 的名字很少听到,最近试装发现不是很友好:官方文档写的对新手来说有点坑: 有数据库工作经验的直接看最后一句就可以. 如果打算为项目选 ...
- reactjs scrollTop
问题1: 单页应用开发时,当在A页面滚动滚动条后,点击进入B页面,滚动条保持在A页面的滚动位置. 目标: 同级路由切换时,滚动条回滚到页面顶端. 解决方案: //在componentDidMount周 ...
- java 操作CLOB类型数据
clob类型,但对于这个类型处理起来还是比较麻烦的,varchar2长度为4000bytes,如果varchar2能满足楼主的需求,建议使用varchar2,下面提供了在Java 中读取clob类型的 ...
- 【水滴石穿】react-native-ble-demo
项目的话,是想打开蓝牙,然后连接设备 点击已经连接的设备,我们会看到一些设备 不过我这边在开启蓝牙的时候报错了 先放作者的项目地址: https://github.com/hezhii/react-n ...
- 【水滴石穿】react-native忽略黄色提醒
方法一 import { YellowBox } from 'react-native'; YellowBox.ignoreWarnings(['Remote debugger']); // 忽略黄色 ...