基于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( ...
随机推荐
- Android 分享透明图片到微信变黑的问题
/** * bitmap中的透明色用白色替换 * * @param bitmap * @return */ public static Bitmap changeColor(Bitmap bitmap ...
- DotnetBrowser高级教程-（4）使用MVC框架1-搭建基础框架
我们这次重点介绍下MVC框架的使用. 如果您之前使用过微软的mvc web框架,那么dotnetbrowser的mvc框架相信您也会很快上手,两者之间相似度约有80%. 所谓的mvc,以一个例子为例: ...
- 通过run configuration启动项目
系统通过配置加载路径是通过classpath加载绝对路径 设置属性选中某个项目,然后在工具栏中选择"Run-->Run Confgurations“,然后在对话框的右边选择" ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- linux中nl用法
linux 中nl 命令使用 nl :添加行号打印 -b: 指定行号指定的方式,主要有两种: -b a : 表示不论是否为空行,都同样列出行号 -b t : 如果有空行,则不列出那一行 ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- 03_Nginx加入新模块
1 进入nginx安装文件夹,查看nginx版本号及其编译參数: [root@localhost nginx]# ./nginx -V nginx version: nginx/1.8.0 bu ...
- 设计模式之Protocol实现代理模式
使用场合 使用步骤 不使用protocol实现代理 使用protocol实现代理 一.使用场合 A想让B帮忙,就让B代理 A想通知B发生了一些事情,或者传一些数据给B 观察者模式 二.使用步骤 定义一 ...
- typedef 与 define 的区别
1.区别 (1)定义.执行时间.作用域 定义.执行时间: #define pchar char * typedef char *pchar; 定义的格式差别,显而易见的,要注意,define 是不能存 ...
- 【转载】ASP.Net WebForm温故知新学习笔记：一、aspx与服务器控件探秘
开篇:毫无疑问,ASP.Net WebForm是微软推出的一个跨时代的Web开发模式,它将WinForm开发模式的快捷便利的优点移植到了Web开发上,我们只要学会三步:拖控件→设属性→绑事件,便可以行 ...