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.文件锁定 现在都在讲究什么分布式.并发等,实际上文件的操作也是并发的,在网络环境下,多个用户在同一时刻访问页面,对同一服务器上的同一文件进行着读取,如果,这个用户刚好读到一半,另一个用户就写入了消 ...
- TZ_11_Spring-Boot的整合SpringMvc和MyBatis
1.整合SpringMVC 虽然默认配置已经可以使用SpringMVC了,不过我们有时候需要进行自定义配置. 1>修改方式 通过application.yaml 此名字不需要使用@Propert ...
- 前端（jQuery）（8）-- jQuery元素遍历
1.向下遍历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- jquery源码学习（四）—— jquery.extend()
a.jQuery.extend( source ) b.jQuery.extend(destination, source1, source2, source3 ....) c.jQuery.exte ...
- IO流9 --- 使用FileInputStream和FileOutputStream读写非文本文件 --- 技术搬运工（尚硅谷）
字节流读写非文本文件(图片.视频等) @Test public void test5(){ File srcFile = new File("FLAMING MOUNTAIN.JPG&quo ...
- fidder抓包使用(一)
fidder是会占用 jupyter 端口的,在fidder里边最上边找到tools--->options-->connections里边的8888改成别的重启jupyter就好了
- Birt设置导出格式和去掉多余按钮的方法
1.设置导出格式: webcontent>birt>pages>dialog>ExportReportDialogFragment.jsp页面: 找到for ( int i = ...
- hystrix熔断器
在一个具有多服务的应用中,假如由于其中某一个服务出现问题,导致响应速度变慢,或是根本没有响应返回,会导致它的服务消费者由于长时间的等待,消耗尽线程,进而影响到对其他服务的线程调用,进而会转变为整个应用 ...
- Codevs2490 导弹防御塔
2490 导弹防御塔 2490 导弹防御塔 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 大师 Master 题目描述 Description Freda的城堡—— ...
- Ionic.Zip
1.Ionic.zIP 实现文件压缩和解压 2.压缩: /// <summary> /// 压缩文件 /// </summary> / ...