基于ajax和Form实现的注册
注册
urls.py
from django.contrib import admin
from django.urls import path, re_path from app01 import views urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.login),
path('get_valid_img/',views.get_valid_img),
path('zhuce/', views.zhuce),
path('books/', views.book_view),
]
视图 views.py
from django.contrib.auth.models import User
#
from django.contrib import auth from django.core.exceptions import NON_FIELD_ERRORS, ValidationError from django.http import JsonResponse from django import forms from django.forms import widgets import re ####Form组件 class UserForm(forms.Form): #必须继承Form
user=forms.CharField(min_length=5,
label="用户名",
error_messages={"required":"用户名不能为空"},
# 想type=text的input标签添加个类
widget=widgets.TextInput(attrs={"placeholder":"请您输入用户名","class":"input"})
)
pwd=forms.CharField(error_messages={"required":"密码不能为空"},
label="密码",
min_length=7,
widget=widgets.PasswordInput(attrs={"placeholder":"请您输入数字与字母组合的密码","class":"input"})
)
r_pwd=forms.CharField(error_messages={"required":"密码不能为空"},
label="确认密码",
min_length=7,
widget=widgets.PasswordInput(attrs={"placeholder": "请您再次输入密码","class":"input"})
)
email=forms.EmailField(required=True,
error_messages={"invalid":"邮箱格式错误",
"required":"邮箱不能为空"},
label="邮箱",
widget=widgets.EmailInput(attrs={"placeholder": "请输入您的邮箱","class":"input"})
) # 局部钩子
def clean_user(self):
# 从第一层校验正确的{:}中取正确的用户名
val=self.cleaned_data.get("user")
user=User.objects.filter(username=val).first()
if not user:
return val
else:
raise ValidationError("用户名已存在!") def clean_pwd(self):
val=self.cleaned_data.get("pwd")
if val.isdigit(): #如果密码是纯数字
raise ValidationError("密码不能是纯数字") #传给错误{:}
else:
return val def clean_email(self):
val=self.cleaned_data.get("email")
if re.search("\w+@163.com$",val):
return val
else:
raise ValidationError("邮箱必须是163邮箱！") # 全局钩子
def clean(self): #如果第一层没通过,空
pwd=self.cleaned_data.get("pwd")
r_pwd=self.cleaned_data.get("r_pwd") if pwd and r_pwd: #如果全局钩子没有错误,发安徽null,有值,
if pwd==r_pwd: #结构相同,验证通过,返回正确 {:}
return self.cleaned_data
else:
raise ValidationError("两次密码不一样") else:
return self.cleaned_data # 另一个简便方法
# if pwd and r_pwd and r_pwd != pwd:
# self.add_error("r_pwd", ValidationError("两次密码不一致！"))
# else:
# return self.cleaned_data # 注册
def zhuce(request): if request.method=="POST": form=UserForm(request.POST)
print(form) res={"user":None,"err_msg":""} if form.is_valid():
res["user"]=form.cleaned_data.get("user")
print(form.cleaned_data)
user=form.cleaned_data.get("user")
pwd=form.cleaned_data.get("pwd")
email=form.cleaned_data.get("email")
user=User.objects.create_user(username=user,password=pwd,email=email) else:
print(form.errors)
print(form.cleaned_data)
res["err_msg"]=form.errors return JsonResponse(res) else:
form=UserForm()
return render(request,"zhuce.html",locals())
zhuce.html
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="../static/css/styles.css"> <!--[if IE]>
<script src="/static/js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jq22-container" style="padding-top:100px">
<div class="login-wrap">
<div class="login-html">
<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
<div class="login-form">
<form action="" method="post">
<div class="sign-up-htm"> {##}
{# <div class="group">#}
{#label for="username" class="label">用户名</label>#}
{#<input id="user" type="text" class="input" placeholder="请在这里输入用户名" name="user">#}
{# <span>{}</span>#}
{# </div>#}
{#div class="group">#}
{#label for="password" class="label">密码</label>#}
{# input id="pass" type="password" class="input" data-type="password" name="pwd" placeholder="请在这里输入密码">#}
{# </div>#}
{# div class="group">#}
{#label for="password" class="label">确认输入密码</label>#}
{# <input id="pass" type="password" class="input" name="pwd" placeholder="请输入密码">#}
{# </div>#}
{#<div class="group">#}
{# <label for="email" class="label">请输入邮箱</label>#}
{#<input id="pass" type="text" class="input" placeholder="请在这里输入邮箱" name="email">#}
{#</div>#} {% csrf_token %}
{% for field in form %}
<div class="group">
<label for="">{{ field.label }}</label>
{{ field }}
<span class="error"></span>
</div>
{% endfor %} <div class="group">
<input type="button" class="button zhuce_btn" value="注册" style="cursor: pointer">
</div>
<div class="hr"></div>
<div class="foot-lnk">
<label for="tab-1">会员专属通道</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div> <script src="/static/js/jquery.js"></script>
<script> $(".zhuce_btn").click(function () { $.ajax({
url: "",
type: "post",
data: {
user: $("#id_user").val(),
pwd: $("#id_pwd").val(),
r_pwd: $("#id_r_pwd").val(),
email: $("#id_email").val(),
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
},
success: function (res) {
{#注册成功#}
if (res.user) {
location.href = "/login/" }
else { {# 先清除注册错误时的错误内容,#}
$(".error").html("");
// 移除属性,就是框边色
$(".group").removeClass("has-error"); //展示新错误
$.each(res.err_msg, function (i, j) {
{#循环,字符串拼接,渲染出来的input标签的id是id_user,错误信息添加到下面的span标签渲染#}
$("#id_" + i).next().html(j[0]).css("color", "red").parent().addClass("has-error")
// 同时在父类添加,表格样式has-error
}) }
}
})
}) </script> </body>
</html>
效果 :
基于ajax和Form实现的注册的更多相关文章
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- Django 基于Ajax & form 简单实现文件上传
前端实现 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- 基于Ajax提交formdata数据、错误信息展示和局部钩子、全局钩子的校验。
formdata重点: 实例化FormData这个类 循环serializeArray可以节省代码量 图片要用$('#id')[0].files[0]来获得 加上contentType:false和p ...
- 基于ajax的登录
验证码 当登录一个网站的时候往往会有验证码. python生成随机验证码,需要使用到 PIL 模块 安装 : pip3 install pillow 1. 创建图片 我们现在写的验证码属 ...
- Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- Django【第22篇】：基于Ajax实现的登录
基于ajax实现的登录 一.需要知道的新知识点 1.刷新验证码.给src属性加一个?号.加个?会重新去请求 //#给验证码刷新 $(".vialdCode_img").click( ...
随机推荐
- Flutter开发记录part3
(1) 获取当前屏幕宽度 width: MediaQuery.of(context).size.width, (1) pull_to_refresh,smartrefresh 自定义文字: new S ...
- Direct-X学习笔记--纹理映射
一.介绍 之前学习了如何绘制物体,还画了个DX自带的茶壶,然而这个东东并不怎么好看....离我们现实的物体简直相隔千里. 仅仅能说像美术他们用来写生的模型...那么要怎么样才干让我们的东西看起来更像真 ...
- iframe 实现网页本页显示
<el-dialog title="" :visible.sync="dialogVisible"> <iframe src="ht ...
- Spring使用Cache、整合Ehcache（转）
Spring使用Cache 从3.1开始,Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事务管理的支持.Spring Cache是作用在方法上的,其核心思想是这样的:当我 ...
- javascript 关于弹出新页面始终在正中央方法
记录一个关于弹出新页面始终在正中央方法 function openwindow(url, name, iWidth, iHeight) { var url; ...
- Hibernate学习六----------CRUD
© 版权声明:本文为博主原创文章,转载请注明出处 实例 1.项目结构 2.pom.xml <project xmlns="http://maven.apache.org/POM/4.0 ...
- Angular 一些问题（跨域，后台接收不到参数）
1,跨域:跟前端没多大关系的,后台没设置头而已.这时候如果你们后端太菜你可以叫他加上每种语言 都不同,但是里面的呢荣是一样的.具体跨域可以跳转这里http://www.cnblogs.com/dojo ...
- Codeforces 223C Partial Sums 数论+组合数学
题意非常easy,求不是那么好求的,k非常大 要操作非常多次,所以不可能直接来的.印象中解决操作比較多无非线段树 循环节 矩阵 组合数等等吧,这道题目 也就仅仅能多画画什么 的了 就以第一个案例为主吧 ...
- POJ 2253 Frogger(最小最大距离)
题意 给你n个点的坐标 求第1个点到第2个点的全部路径中两点间最大距离的最小值 非常水的floyd咯 #include<cstdio> #include<cmath> #i ...
- js将字符串转变成数字
方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有 ...