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("两次输入密码不一致！")