美文网首页
django项目注册页面ajax验证

django项目注册页面ajax验证

作者: 一念之间789 | 来源:发表于2018-09-30 14:38 被阅读0次

    ajax post方式提交时需要在 data中添加 "csrfmiddlewaretoken":$("[name=csrfmiddlewaretoken]").val()

    user/url.py

    urlpatterns = [
        url(r"^check_username/$",views.check_username,name="check_username"),
        url(r"^check_password/$",views.check_password,name="check_password"),
        url(r"^check_password2/$",views.check_password2,name="check_password2"),
        url(r"^check_img_code/$",views.check_img_code,name="check_img_code"),
    ...]
    

    user/register.html

    {% load static from staticfiles %}
    <script src="{% static "book/js/jquery-1.12.4.min.js" %}"></script>
    
    <form action="{% url "user:register" %}" method="POST" id="register_form">
    {% csrf_token %}
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" id="username" name="username" placeholder="用户名位6-10位"></td>
            <td id="username_link"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" id="password" name="password" placeholder="密码位6-10位"></td>
            <td id="password_link"></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" id="password2" name="password2" placeholder="密码位6-10位"></td>
            <td id="password2_link"></td>
        </tr>
        <tr>
            <td> 验证码:</td>
            <td><input type="text" id="img_code" name="img_code" placeholder="请输入验证码"></td>
            <td> <img src="{% url "user:create_img_code" %}" id="create_img_code"/></td>
            <td id="code_link"></td>
        </tr>
        <tr>
            <td><input type="submit" value="注册"></td>
        </tr>
    </table>
    </form>
    <script>
    var create_img_code = document.getElementById("create_img_code")
    
    var url = "/user/create_img_code?num="
    create_img_code.onclick = function () {
        var num = new Date().getTime()
        url += num
        create_img_code.src = url
    }
    
    $(function(){
        $("#username").blur(function(){
            $.ajax({
                "url":"{% url "user:check_username" %}",
    
                "data":{
                        "username":$(this).val().trim()
                },
                "success":function (data) {
                    $("#username_link").html("")
                    $("#username_link").append(data.r_link)
                }
            })
        })
        $("#password").blur(function(){
            $.ajax({
                "url":"{% url "user:check_password" %}",
                "type":"post",
                "data":{
                        "password":$(this).val().trim(),
                        "csrfmiddlewaretoken":$("[name=csrfmiddlewaretoken]").val()
                },
                "success":function (data) {
                    $("#password_link").html("")
                    $("#password_link").append(data.r_link)
                }
            })
        })
        $("#password2").blur(function(){
            $.ajax({
                "url":"{% url "user:check_password2" %}",
                "type":"post",
                "data":{
                        "password":$("#password").val().trim(),
                        "password2":$(this).val().trim(),
                    "csrfmiddlewaretoken":$("[name=csrfmiddlewaretoken]").val()
                },
                "success":function (data) {
                    $("#password2_link").html("")
                    $("#password2_link").append(data.r_link)
                }
            })
        })
    })
    </script>
    

    user/views.py

    def check_username(request):
        username = request.GET.get("username")
        print(username)
        for i in User.objects.all():
            if i.username == username:
                r={"r_link":"该用户名已被使用"}
                return HttpResponse(json.dumps(r, ensure_ascii=False),
                                content_type="application/json;charset=utf-8")
        else:
            if len(username)>=6 and len(username)<=10:
                r = {"r_link": "ok"}
                return HttpResponse(json.dumps(r, ensure_ascii=False),
                            content_type="application/json;charset=utf-8")
            else:
                r = {"r_link": "用户名为6-10位"}
                return HttpResponse(json.dumps(r, ensure_ascii=False),
                                content_type="application/json;charset=utf-8")
    
    
    def check_password(request):
        password = request.POST.get("password")
        if len(password)>=6 and len(password)<=10:
            r = {"r_link": "ok"}
        else:
            r = {"r_link": "密码为6-10位"}
        return HttpResponse(json.dumps(r, ensure_ascii=False),
                        content_type="application/json;charset=utf-8")
    
    def check_password2(request):
        password = request.POST.get("password")
        password2 = request.POST.get("password2")
        print(password,password2)
        if password==password2:
            r = {"r_link": "ok"}
        else:
            r = {"r_link": "两次密码不一致"}
    
        return HttpResponse(json.dumps(r, ensure_ascii=False),
                            content_type="application/json;charset=utf-8")
    
    def check_img_code(request):
        img_code1 = request.GET.get("img_code")
        img_code2= request.session.get("img_code")
        print(img_code1,img_code2)
        if img_code1==img_code2:
            r = {"r_link": "ok"}
        else:
            r = {"r_link": "验证码错误"}
        return HttpResponse(json.dumps(r, ensure_ascii=False),
                            content_type="application/json;charset=utf-8")    

    相关文章

      网友评论

          本文标题:django项目注册页面ajax验证

          本文链接:https://www.haomeiwen.com/subject/vzlwoftx.html