基于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内存泄露自动检测神器LeakCanary
经典的面试题: a.怎样在coding过程中避免内存泄露? b.怎样检测内存泄露? 这两个问题我想大部分Android 职位面试时都会被问到吧. 怎样避免就不赘述了,网上很多答案. 工具呢,当然也有很 ...
- tomcat部署不成功 Deployment failure on Tomcat 6.x. Could not copy all resources to
解决办法: tomcat服务并没有启动.上网搜索之后发现和大家犯的是一个毛病,原来工程中我引了一个包,后来这个包被我给删除了,但是因为已经发布过这个工程了,所以classpath中就有这个包名了,这样 ...
- MFC中 给基于CFormView的单文档添加背景图片
关于基于CFormView的单文档应用程序,添加一个图片背景的方法之一如下: 下面是利用LoadImage实现.(先在程序目录中添加背景图片back.bmp) 1.在view类中添加类成员变量:(为C ...
- spring batch的使用和定时器Quart的使用
Spring Batch是一个基于Spring的企业级批处理框架,它通过配合定时器Quartz来轻易实现大批量的数据读取或插入,并且全程自动化,无需人员管理. 在使用spring batch之前,得对 ...
- win10中以管理员身份启动notepad、cmd、editplus
win10中以管理员身份启动notepad.cmd 在开始菜单中输入,出现了之后再进行右键点击,选择管理员身份运行: 而且editplus也可以“管理员身份运行”,再也不用担心我改不了hosts了: ...
- 23. Spring Boot启动加载数据CommandLineRunner【从零开始学Spring Boot】
转:http://blog.csdn.net/linxingliang/article/details/52069503 实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求 ...
- 检验 java 基础数据类型参数传递方式
测试证明,java基础数据类型参数传递值虽是引用传递但是值不会改变.对象是引用传递,值会改变. 为什么?找到一段话来解释这个问题. "对于字符串对象来说,虽然在参数传递的时候也是引用传递,但 ...
- 程序猿的量化交易之路（32）--Cointrade之Portfolio组合（19）
转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrade.top/ Portfolio:组合,代表的是多个 ...
- gulp 静态资源版本控制
package.json { "name": "gulp", "version": "0.0.1", "des ...
- 转：MSN君最后的十个瞬间
五年前我用过MSN五年.在一家ERP公司当程序猿的时候我甚至在业余时间做过一款MSN订餐机器人. 转完这篇文章.就是真正跟MSN的bye bye了. 转自:www.gogo.cn 今天是一个普通的周五 ...