注册模块——用户名的验证
后端实现流程:
- 创建类视图,get方法重写。
- 从前端获取username
- 数据库查询,检测username是否被注册过。
- 将查询结果以json格式返回给前端。
- 对应视图的url注册,用re_path,?p<name>group的形式
前端js实现流程:
- $定位到用户名输入框,变量名为$username
- $username绑定blur事件,触发自定义函数
- 自定义函数构写,分别判断用户名输入框是否为空?输入字符数量是否符合要求?再通过Ajax请求,将username传给后端,接收后端的反馈,判断是否已被注册过。
小知识总结:
- 得到输入框的值,用val()方法。
- Ajax的url地址用单引号,用双引号的话会有bug。(我之前用的是双引号,排了半个小时才找到。)
- 前端正则匹配,常以^匹配开始,$匹配结束,并以test方法进行,参数是要匹配的对象。
- ?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("服务器超时,请重新刷新一遍");
});
}
});