大黄先生

导航

AJAX的简单示例:注册校验

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

如果这些校验都采用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("两次输入密码不一致!")

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

posted on 2018-08-14 11:36  大黄先生  阅读(1409)  评论(0编辑  收藏  举报