众所周知,我们每次需要注册一个网站的用户名时,都会校验该邮箱、用户名是不是正确的格式、是不是有被使用过,密码是否符合规则,二次确认是否符合。

如果这些校验都采用form表单提交的话,会给用户带来极不好的体验(form表单提交会刷新网页)。

因此,在此引出ajax的一个作用:局部刷新(用户看不到的刷新)。下面是用于注册示例ajax的局部刷新的简单示例:

注册页面:

ajax代码:

<script>
{#取得iuputEmail框中的内容#}
{#inputeamil = $('#i1').val()#}
{#给邮箱绑定监听事件(失去焦点)#}
$("#i1").blur(function () {
{#隐藏p标签(作用:当检验成功时起作用)#}
$("#emailTip").hide()
$.ajax({
url: "/email_check/",
type: "get",
data: {email:$('#i1').val()},
success: function f(data) {
{#ajax中的判断逻辑与python有区别#}
if (data != "False"){
{#alert(data)#}
$("#emailTip").show()
$("#emailTip").html(data)
}
}
})
}) {#检验帐号#}
$("#inputUserName").blur(function () {
{#隐藏p标签(作用:当检验成功时起作用)#}
$("#userTip").hide()
$.ajax({
url: "/user_check/",
type: "get",
data: {user: $('#inputUserName').val()},
success: function f(data) {
{#ajax中的判断逻辑与python有区别#}
if (data != "False"){
{#alert(data)#}
{#给p标签添加文本(html)内容#}
$("#userTip").show()
$("#userTip").html(data)
}
}
})
}) {#检验密码01 #}
$("#inputPassword1").blur(function () {
$("#pwdTip1").hide()
$.ajax({
url: "/pwd_check1/",
type: "get",
data: {pwd1: $('#inputPassword1').val()},
success: function f(data) {
{#ajax中的判断逻辑与python有区别#}
if (data != "False"){
{#alert(data)#}
{#给p标签添加文本(html)内容#}
$("#pwdTip1").show()
$("#pwdTip1").html(data)
}
}
})
}) {#校验密码02#}
$("#inputPassword2").blur(function () {
$("#pwdTip2").hide()
$.ajax({
url: "/pwd_check2/",
type: "get",
data: {pwd2: $('#inputPassword2').val(), pwd1:$('#inputPassword1').val()},
success: function f(data) {
{#ajax中的判断逻辑与python有区别#}
if (data != "False"){
{#alert(data)#}
{#给p标签添加文本(html)内容#}
$("#pwdTip2").show()
$("#pwdTip2").html(data)
}
}
})
})
</script>

校验代码(views):

# 校验邮箱
def email_check(request):
check_email = request.GET.get("email")
print(check_email)
if check_email:
check_ret = models.UserInfo.objects.filter(email=check_email)
if check_ret:
return HttpResponse("邮箱地址已被使用!")
else:
re_result = re.findall('[a-zA-Z0-9]+@[a-zA-Z0-9\.]+[a-zA-Z]', check_email)
if re_result:
return HttpResponse(False)
else:
return HttpResponse("邮箱地址格式错误!")
else:
return HttpResponse("邮箱地址不能为空!")
# print(email_all) # 校验用户名
def user_check(request):
check_user = request.GET.get("user")
print(check_user)
if check_user:
check_ret = models.UserInfo.objects.filter(userName=check_user)
if check_ret:
return HttpResponse("帐号已被使用!")
else:
return HttpResponse(False)
else:
return HttpResponse("帐号不能为空!") # 检验密码
def pwd_check1(request):
check_pwd1 = request.GET.get("pwd1")
if not check_pwd1:
return HttpResponse("密码不能为空!")
else:
pwd1_len = len(check_pwd1)
re_pwd1 = '^[a-zA-Z][0-9A-Za-z_]+'
re_result = re.findall(re_pwd1, check_pwd1)
if re_result:
if pwd1_len >= 8 and pwd1_len <= 16:
return HttpResponse(False)
else:
return HttpResponse("密码格式为:字母开头,含数字字母下划线,长度大于8且小于16")
else:
return HttpResponse("密码格式为:字母开头,含数字字母下划线,长度大于8且小于16") # 确认密码
def pwd_check2(request):
pwd1 = request.GET.get("pwd1")
pwd2 = request.GET.get("pwd2")
print(pwd1, pwd2)
print(pwd1 == pwd2)
if pwd1 == pwd2:
return HttpResponse(False)
else:
return HttpResponse("两次输入密码不一致!")

代码的逻辑适合小白看(比较臃肿),求大神多多指点!

AJAX的简单示例:注册校验的更多相关文章

  1. AJAX实现简单的注册页面异步请求

    p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...

  2. 转贴:JavaScript实现Ajax请求简单示例

    转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...

  3. Spring MVC 文件上传简单示例(form、ajax方式 )

    1.Form Upload SpringMVC 中,文件的上传是通过 MultipartResolver 实现的,所以要实现上传,只要注册相应的 MultipartResolver 即可. Multi ...

  4. 关于Ajax实现的简单示例

    一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html ...

  5. Net Core Identity 身份验证:注册、登录和注销 (简单示例)

    一.前言 一般我们自己的系统都会用自己设置的一套身份验证授权的代码,这次用net core的identity来完成简单的注册.登录和注销. 二.数据库 首先就是创建上下文,我这里简单的建了Users和 ...

  6. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  7. Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  8. [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  9. SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

随机推荐

  1. 洛谷 P3381 【【模板】最小费用最大流】

    题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的 ...

  2. 13_文件系统访问列表_case语句及脚本选项

    FACL:Filesystem Access Control List利用文件扩展保存额外的访问控制权限 setfacl: -m:设定 u:UID:perm g:GID:perm root@kali: ...

  3. 【Mac】【创建钥匙串】

    1 Mac在钥匙串创建系统证书失败 https://blog.csdn.net/lllkey/article/details/79423596 问题: 在Eclipse的Debug,使用gdb的时候, ...

  4. canvas 水波纹

    <!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset=&qu ...

  5. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  6. 【设计模式】工厂模式(Factory Pattern)

    [前言] 很多时候我们编写了好几个接口的实现类,这些实现类分别有不同特性,用在不同的情景下.而我们对于这些实现类,也往往不会对外暴露内部增加的方法,只希望外部调用接口的方法,在这种情况下,我们没必要让 ...

  7. C#数组--(一维数组,二维数组的声明,使用及遍历)

    数组:是具有相同数据类型的一组数据的集合.数组的每一个的变量称为数组的元素,数组能够容纳元素的数称为数组的长度. 一维数组:以线性方式存储固定数目的数组元素,它只需要1个索引值即可标识任意1个数组元素 ...

  8. 创建ajax的步骤

    第1步:创建XMLHttpRequest对象,也就是创建一个异步调用对象. 第2步:创建一个新的HTTP请求,并指定该HTTP请求的方法.URL以及验证信息. 第3步:设置响应HTTP状态变化的函数. ...

  9. 大数据分析-excel常用技巧

    在用EXCEL制表时,经常要要用到填充,比如1到100行内容相同或引用公式,大多数人会用鼠标拖来拖去,例如: 在第一行的A1单元格右下方 鼠标指针 变 实心黑十字 向下拉或向右,向左拉 我想拉100行 ...

  10. maven构建web项目,用jetty测试的配置pom.xml

    maven构建web项目,用jetty测试的配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmln ...