基于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开发常见的Activity中内存泄漏及解决办法
上一篇文章楼主提到由Context引发的内存泄漏,在这一篇文章里,我们来谈谈Android开发中常见的Activity内存泄漏及解决办法.本文将会以“为什么”“怎么解决”的方式来介绍这几种内存泄漏. ...
- PHP计算两个时间的年数、月数以及天数
如何获取两个不同时间相差几年几月几日呢?比如当前时间距离2008年08月08日的北京奥运会有几年几月几日了?需要说明的是:1.定义一年为360天,一个月为30天:2.代码中86400=24*60*60 ...
- SVG图片背景透明
今天在调整网页的时候,将logo以原有直接贴代码形式,改为加载文件. 其实真正的目的是做SEO.上次SEO交流后得出 结论:核心在于内容的本身的优化.信噪比很重要.也就是有效信息需要占文章的主要内容, ...
- 由内省引出JavaBean的应用
IntroSpector-->javaBean-->特殊的java类 get和set方法 ReflectPoint pt1 = new ReflectPoint(3,5); String ...
- 2017.3.14 activiti实战--第二十章--REST服务
学习资料:<Activiti实战> 第二十章 REST服务 20.1 通信协议概述 略. 20.2 REST API概述 资源分类 资源基础URI 说明 Deployments manag ...
- setTag和findViewByTag的使用具体解释
在使用ListView或者GridView的时候. 假设想要在Aciviry中获取到Item中的子View,比較频繁的使用是:getChildAt(int position): 之前自己差点儿不会去使 ...
- winform程序公布后，client下载报错“您的 Web 浏览器设置不同意执行未签名的应用程序”
如题 在winserver2008服务器上操作会报错.解决的方法: IE→Internet选项→安全→可信网站,加入信任公布的IP地址
- Linux禁止Ctrl+Alt+Del重新启动
方法1:改动/etc/inittab 屏蔽 ca:12345:ctrlaltdel:/sbin/shutdown -t1 -a -r now 或者删除改行内容 保存退出 适用对象:RedHat4.8 ...
- 转：DDR中端接技术基本概念
DDR中端接技术基本概念 版权声明:转载请注明出处:http://blog.csdn.net/lg2lh https://blog.csdn.net/lg2lh/article/details/90 ...
- nginx 代理模式下，获取客户端真实IP
最近做博友推荐,发现个小问题,用$_SERVER['REMOTE_ADDR'];得到的都是服务器的地址192.168.96.52,搜索了一下,发现问题,改为$_SERVER['HTTP_X_REAL_ ...