页面注册系统--使用forms表单结合ajax
页面注册系统--使用forms表单结合ajax
在Django中通过forms构建一个表单
1.urls.py 配置路由
from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^login/', views.login),
url(r'^get_valid_img/', views.get_valid_img),
url(r'^index/', views.index),
# 用户注册页面 reg
url(r'^reg/', views.reg),
]
2.在app 包路径 创建一个forms.py 用于定义类：
from django import forms
from django.forms import widgets
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
class RegForm(forms.Form):
username = forms.CharField(min_length=5,
# 定义 class 类型 form-control 为 bootcss 样式
widget=widgets.TextInput(attrs={"class": "form-control"})
)
password = forms.CharField(min_length=5,
widget=widgets.PasswordInput(attrs={"class": "form-control"}))
repeat_password = forms.CharField(min_length=5,
widget=widgets.PasswordInput(attrs={"class": "form-control"})
)
email = forms.EmailField(min_length=5,
widget=widgets.TextInput(attrs={"class": "form-control"})
)
# 清洗全局 钩子用于清洗 两次用户输入的密码是否一致
def clean(self):
if self.cleaned_data.get("password") == self.cleaned_data.get("repeat_password"):
return self.cleaned_data
else:
raise ValidationError("两次密码不一致")
3.视图views.py页面配置
from django.shortcuts import render,HttpResponse,redirect
# Create your views here.
from PIL import Image
from django.contrib import auth
from .models import *
import json
from django.contrib.auth.decorators import login_required
from blog.forms import RegForm
def reg(request):
if request.is_ajax():
regForm = RegForm(request.POST)
regResponse = {"user": None, "error_msg": None}
if regForm.is_valid():
username = regForm.cleaned_data.get("username")
password = regForm.cleaned_data.get("password")
# repeat_password = regForm.cleaned_data.get("repeat_password")
email = regForm.cleaned_data.get("email")
user = UserInfo.objects.create_user(username=username, password=password, email=email)
regResponse["user"] = username
else:
regResponse["error_msg"] = regForm.errors
return HttpResponse(json.dumps(regResponse))
# 将forms.py 数据实例化给前端 模板
regForm = RegForm()
return render(request, "reg.html", {"regForm": regForm})
4.模板页面reg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/css/login.css">
<link rel="stylesheet" href="/static/dist/css/bootstrap.css">
<script src="/static/dist/js/jquery-3.2.1.js"></script>
<script src="/static/dist/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="user">用户名</label>
{{ regForm.username }} <span class="err_msg"></span>
</div>
<div class="form-group">
<label for="pwd">密码</label>
{{ regForm.password }} <span class="err_msg"></span>
</div>
<div class="form-group">
<label for="pwd">确认密码</label>
{{ regForm.repeat_password }} <span class="err_msg"></span>
</div>
<div class="form-group">
<label for="pwd">邮箱</label>
{{ regForm.email }} <span class="err_msg"></span>
</div>
<div class="row">
<div class="col-md-6">
<input type="button" value="登录" class="btn-primary btn Regbtn">
</div>
</div>
</form>
</div>
</div>
<script>
$(".Regbtn").click(function () {
$.ajax({
url:"/reg/",
// csrftoken 值 放在 headers 中
headers:{"X-CSRFToken":$.cookie('csrftoken')},
type:"post",
// 输出序列化表单值的结果： 通过 form定义的 id=reg 属性 .serialize() 可以获取里面所有的键值对
data:$("#reg").serialize(), // 通过serialize() 获取所有的键值对
// http://www.w3school.com.cn/jquery/ajax_serialize.asp // 参考
// data:{ // 与此结果一致
// username:$("#id_username").val(),
// password:$("#id_password").val(),
// repeat_password:$("#id_repeat_password").val(),
// email:$("#id_email").val()
// },
success:function (data) {
var data=JSON.parse(data);
if(data.user){
location.href="/login/"
}
else {
// 在每次 点击提交时，将错误信息清空
$(".err_msg").html("");
var error_dict = data.error_msg;
// 通过 each 循环错误信息，里的 key 和 值
$.each(error_dict,function (i,j) {
console.log(i,j);
// 拼接 forms 生成的 id 标签，在其后面标签添加 内容
$("#id_"+i).next().addClass("pull-right").html(j[0]).css("color","red");
// 判断如果 i 等于 __all__ 全局 清洗 钩子 返回的错误，将错误值放到 id_repeat_password 后面
if(i=="__all__"){
$("#id_repeat_password").next().addClass("pull-right").html(j[0]).css("color","red");
}
})
}
}
})
})
</script>
</body>
</html>
页面注册系统--使用forms表单结合ajax的更多相关文章
- Django实战(一)-----用户登录与注册系统4（表单）
我们前面都是手工在HTML文件中编写表单form元素,然后在views.py的视图函数中接收表单中的用户数据,再编写验证代码进行验证,最后使用ORM进行数据库的增删改查.这样费时费力,整个过程比较复杂 ...
- django实现密码加密的注册（数据对象插入）-结合forms表单实现表单验证
forms表单 #_*_coding:utf-8_*_ from django import forms class regis(forms.Form): username = forms.CharF ...
- Django框架form表单配合ajax注册
总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 下面是写的登录页面的实例 1:views视图中的代码 # 注册页面 def regi ...
- Python的Django框架中forms表单类的使用方法详解
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- 织梦自定义表单通过ajax提交的实现方法
自定义表单通过ajax判断,提交不用跳转页面,提高用户体验.具体方法如下: html表单代码部分,就提交按钮改成botton,,添加onclick事件 表单代码: <form action=&q ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- form表单的ajax验证2
form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 关于form表单或者Ajax向后台发送数据时，数据格式的探究
最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...
随机推荐
- BitmapImage处理网络图片，例如阿里云获取的图片。异步加载到需要显示的控件上。提升速度非常明显。
想直接把网络图片赋给控件,又要下载又要缓存,速度非常慢.不流畅. 需要进行处理,异步加载会显著提升速度.方法如下: public static BitmapImage ByteArrayToBitma ...
- Netty实现简单私有协议
本文参考<Netty权威指南> 私有协议实现的功能: 1.基于Netty的NIO通信框架,提供高性能异步通信能力 2.提供消息的编码解码框架,实现POJO的序列化和反序列化 3.提供基于I ...
- python set 使用
创建集合set python set类是在python的sets模块中,大家现在使用的python2.7.x中,不需要导入sets模块可以直接创建集合.>>>set('boy')se ...
- Valgrind使用【转】
转自:https://www.cnblogs.com/napoleon_liu/articles/2001802.html 调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到 ...
- c++学习day4
1.结构(struct) struct name{ int num; name *next; } 1)所占内存空间即结构中所有成员的变量大小之和 2)定义指向结构变量的指针比如 name *a; na ...
- linux shell中 if else for循环以及大于、小于、等于逻辑表达式的历程
作者:邓聪聪 比如比较字符串.判断文件是否存在及是否可读等,通常用"[]"来表示条件测试. 注意:这里的空格很重要.要确保方括号的空格.笔者就曾因为空格缺少或位置不对,而浪费好多宝 ...
- html单选按钮用jQuery中prop()方法设置
模拟单选按钮时用jQuery,prop方法来设置. 赋默认选中值:$("#" + id).find("input:radio[value='" + state ...
- Python os.remove() 删除文件
概述 os.remove() 方法用于删除指定路径的文件.如果指定的路径是一个目录,将抛出OSError. 在Unix, Windows中有效 语法 remove()方法语法格式如下: os.remo ...
- 求逆序对 ----归并排 & 树状数组
网上看了一些归并排求逆序对的文章,又看了一些树状数组的,觉得自己也写一篇试试看吧,然后本文大体也就讲个思路(没有例题),但是还是会有个程序框架的 好了下面是正文 归并排求逆序对 树状数组求逆序对 一. ...
- slice的部分说明
1.slice是数值的一个引用,并不会新增内存地址. 2.slice的容量和长度是两个概念,这个长度跟数组的长度是一个概念,即在内存中进行了初始化实际存在的元素的个数.何谓容量?如果通过make函数创 ...