基于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( ...
随机推荐
- Linux下Utuntu使用
以前一直用Centos,在下面安装了Vmware Tools和Eclipse C++基本能使用,也遇到过一些问题.突然心血来潮,试试Utuntu,所以在实验室电脑虚拟机上装一下,安装过程很熟练了,参考 ...
- The network connection was lost 文件下载错误提示
假设出现这种错误,可能是模拟器断网,重新启动下模拟器就能够:The network connection was lost
- ushare编译之 ‘struct sockaddr_storage’ has no member named ‘s_addr’
编译ushare的时候出现'struct sockaddr_storage' has no member named 's_addr' 这是使用libupnp1.6.19出现版本号不兼容的错误. 解决 ...
- matlab-2
function varargout = gmm(X, K_or_centroids) % ====================================================== ...
- java GC(Garbage Collector) | System.gc()
http://win.sy.blog.163.com/blog/static/94197186201151093543556/ Java垃圾回收调优
- windows下使用Eclipse编译执行MapReduce程序 Hadoop2.6.0/Ubuntu
一.环境介绍 宿主机:windows8 虚拟机:Ubuntu14.04 hadoop2.6伪分布:搭建教程http://blog.csdn.net/gamer_gyt/article/details/ ...
- 一些Python黑客脚本
[Github项目地址] https://github.com/threeworld/Python
- js运算【按位非】~
这个运算符有点意思:按位非[~] 先来几个例子: ~undefined: -1 ~false: -1 ~true: -2 ~10:-11 找出规律了吧~~ 再说一下运用场景: 之前判断字符串是否存在是 ...
- 启动Eclipse时，启不起来JVM terminated. Exit code=-1
启动Eclipse时,启不起来JVM terminated. Exit code=-1 出现错误了,不知道什么原因原本好好的Eclipse,今天早上出问题了,启动不起来还抛出JVM terminate ...
- ReactiveCocoa入门教程——第一部分【转载】
作为一个iOS开发者,你写的每一行代码几乎都是在响应某个事件,例如按钮的点击,收到网络消息,属性的变化(通过KVO)或者用户位置的变化(通过CoreLocation).但是这些事件都用不同的方式来处理 ...