1.BBS项目之注册功能通过forms验证
from django import forms from blog.models import User from django.contrib.auth import authenticate class CheckForm(forms.Form): username = forms.CharField(max_length=10, min_length=3) password = forms.CharField(max_length=18, min_length=6) re_password = forms.CharField(max_length=18, min_length=6) telephone = forms.CharField(max_length=11, min_length=11) #? email = forms.EmailField() def clean_username(self): cleaned_username = self.cleaned_data.get('username') return cleaned_username
from django.shortcuts import render from django.http import JsonResponse from blog.checks import check_name, CheckForm from blog.models import User # 定义接口规范 response_dic = { 'statue': 1, 'msg': 'ok', 'data': {} } # 注册 def register(request): if request.method == "GET": return render(request, 'register.html') if request.method == "POST": # print(request.POST) check_form = CheckForm(request.POST) if check_form.is_valid(): # 除了re_password其余都是有用字段 cleaned_form = check_form.cleaned_data cleaned_form.pop('re_password') print(cleaned_form) # 数据库插入数据 user = User.objects.create_user(**cleaned_form) if user: response_dic['statue'] = 1 response_dic['msg'] = 'ok' response_dic['data'] = {} else: response_dic['statue'] = 2 response_dic['msg'] = 'error' response_dic['data'] = {} return JsonResponse(response_dic)
2. ajax 请求调用后端数据库查看用户是否存在
# 用户名重复验证 def check_name(username): print(username) # user = authenticate(username=username) user = User.objects.filter(username=username) if user: return '用户已存在' else: return 'OK' #写一个验证用户名的函数
# 校验用户名是否重名 def check_username(request): if request.is_ajax(): username = request.GET.get('username', None) msg = check_name(username) response_dic['msg'] = msg return JsonResponse(response_dic) #views层调用check_name函数来返回给数据给前端的ajax请求
<script src="/static/bs-3.3.7/js/jquery-3.3.1.js"></script> <script> // 获取焦点事件: 所有.input-div下的input都有该事件 $('.input-div input').focus(function () { $(this).next().text("") }); // 失去焦点事件 $('#username').blur(function () { // 发送用户名重名校验请求 var username = $(this).val(); var _this = this // @前台先完成前端校验 if (username) { // 有内容才校验 $.ajax({ url: '/check_username/', type: 'get', data: { username: username }, success: function (data) { if (data.msg != 'OK') { $(_this).next().text(data.msg) } } }) } }) // 失去焦点事件 $('#password').blur(function () { // 发送用户名重名校验请求 var password = $(this).val(); var length = password.length; if (length < 6) { $(this).next().text("密码过短") } else if (length > 16) { $(this).next().text("密码过长") } }) // 表单值变化检测事件 $('#re_password').on('input', function () { password = $('#password').val(); re_password = $(this).val(); console.log(password) console.log(re_password) if (password != re_password) { $(this).next().text("密码不相同") } else { $(this).next().text("") } }) // 注册请求 $('.register').click(function () { key_values = $('.form').serializeArray(); // 这里是拿到form表单输入的全部内容信息 form_data = new FormData(); $.each(key_values, function (index, obj) { // console.log(obj.name, obj.value) form_data.append(obj.name, obj.value); // 已经包含了csrftoken }); $.ajax({ url: "/register/", type: 'post', data: form_data, contentType: false, processData: false, success: function (data) { console.log(data) } }) }) </script>