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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wzyaiwl/article/details/86568729

后端实现流程：

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("服务器超时，请重新刷新一遍");
        });
    }
});