注册模块——用户名的验证

后端实现流程:

  1. 创建类视图,get方法重写。
  2. 从前端获取username
  3. 数据库查询,检测username是否被注册过。
  4. 将查询结果以json格式返回给前端。
  5. 对应视图的url注册,用re_path,?p<name>group的形式

前端js实现流程:

  1. $定位到用户名输入框,变量名为$username
  2. $username绑定blur事件,触发自定义函数
  3. 自定义函数构写,分别判断用户名输入框是否为空?输入字符数量是否符合要求?再通过Ajax请求,将username传给后端,接收后端的反馈,判断是否已被注册过。

小知识总结:

  1. 得到输入框的值,用val()方法。
  2. Ajax的url地址用单引号,用双引号的话会有bug。(我之前用的是双引号,排了半个小时才找到。)
  3. 前端正则匹配,常以^匹配开始,$匹配结束,并以test方法进行,参数是要匹配的对象。
  4. ?P<name>group是将后面匹配的group的数据取了一个组名叫name,后面视图函数可以通过这个组名获取其数据。

后端视图代码

from django.views import View
from django.http import HttpResponse,JsonResponse

from users import models
class Verfiy_username(View):
    def get(self,request,username):
        count = models.Users.objects.filter(username= username).count()
        data = {
            'username' : username,
            'count' : count
        }
        return JsonResponse(data)

urls注册

from django.urls import path,re_path
from . import views

app_name = 'verifications'

urlpatterns = [
    re_path('verfiy_username/(?P<username>\w{5,20})/',views.Verfiy_username.as_view(),name = 'verfiy_username'),
        ]

js代码

$(function () {
    var $username = $("#user_name");  //获取输入用户名框标签


    $username.blur(function () {   //焦点失去时,调用用户验证函数
        check_username();
    });

   
    function check_username() {
       var username = $username.val();
       if (username === ''){
           message.showError('用户名不能为空');
           return
       }
       if (!(/^\w{5,20}$/).test(username)){
           message.showError('请输入5-20个字符的用户名');
           return
       }
        //发送AJAX请求,查询用户名是否已被注册
        $.ajax({
            type: "GET",
            url: '/verfiy_username/' + username + '/',   //url不要使用双引号,有bug
            // url: '/usernames/' + username + '/',
            dataType: 'json'
        })
        .done(function (data) {
            if (data.count == 0) {
                message.showInfo(data.username + '能正常使用');
                // alert("能正常使用");
            }
            else {
                message.showError(data.username + '用户已被注册过');
            }
        })
        .fail(function () {
            message.showError("服务器超时,请重新刷新一遍");
        });
    }
});

 

posted @ 2019-01-21 10:15  龙~白  阅读(174)  评论(0编辑  收藏  举报