註冊模塊——用戶名的驗證

後端實現流程：

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("服務器超時，請從新刷新一遍");
        });
    }
});