添加注册页面用户名，邮箱已被注册的ajax表单验证

account/views.py

@@ -5,15 +5,15 @@ from django.shortcuts import render
 from django.db.models import Q
 
 from rest_framework.views import APIView
-
+from rest_framework.response import Response
 from utils.shortcuts import serializer_invalid_response, error_response, success_response, paginate
 from utils.captcha import Captcha
 
 from .decorators import login_required
 from .models import User
 from .serializers import (UserLoginSerializer, UsernameCheckSerializer,
-                          UserRegisterSerializer,  UserChangePasswordSerializer,
+                          UserRegisterSerializer, UserChangePasswordSerializer,
-                          EmailCheckSerializer,  UserSerializer, EditUserSerializer)
+                          EmailCheckSerializer, UserSerializer, EditUserSerializer)
 
 
 class UserLoginAPIView(APIView):
@@ -120,39 +120,35 @@ class UserChangePasswordAPIView(APIView):
 
 
 class UsernameCheckAPIView(APIView):
-    def post(self, request):
+    def get(self, request):
         """
-        检测用户名是否存在，存在返回True，不存在返回False
+        检测用户名是否存在，存在返回状态码400，不存在返回200
         ---
-        request_serializer: UsernameCheckSerializer
         """
-        serializer = UsernameCheckSerializer(data=request.data)
+        username = request.GET.get("username", None)
-        if serializer.is_valid():
+        if username:
             try:
-                User.objects.get(username=serializer.data["username"])
+                User.objects.get(username=username)
-                return success_response(True)
+                return Response(status=400)
             except User.DoesNotExist:
-                return success_response(False)
+                return Response(status=200)
-        else:
+        return Response(status=200)
-            return serializer_invalid_response(serializer)
 
 
 class EmailCheckAPIView(APIView):
-    def post(self, request):
+    def get(self, request):
         """
-        检测邮箱是否存在，存在返回True，不存在返回False
+        检测邮箱是否存在，存在返回状态码400，不存在返回200
         ---
-        request_serializer: EmailCheckSerializer
         """
-        serializer = EmailCheckSerializer(data=request.data)
+        email = request.GET.get("email", None)
-        if serializer.is_valid():
+        if email:
             try:
-                User.objects.get(email=serializer.data["email"])
+                User.objects.get(email=email)
-                return success_response(True)
+                return Response(status=400)
             except User.DoesNotExist:
-                return success_response(False)
+                return Response(status=200)
-        else:
+        return Response(status=200)
-            return serializer_invalid_response(serializer)
 
 
 class UserAdminAPIView(APIView):
@@ -230,6 +226,6 @@ class AccountSecurityAPIView(APIView):
             try:
                 User.objects.get(username=username, admin_type__gt=0)
             except User.DoesNotExist:
-                return success_response({"applied_captcha":False})
+                return success_response({"applied_captcha": False})
-            return success_response({"applied_captcha":True})
+            return success_response({"applied_captcha": True})
-        return success_response({"applied_captcha":False})
+        return success_response({"applied_captcha": False})

template/src/oj/account/register.html

@@ -7,7 +7,7 @@
             <form id="register-form">
                 <div class="form-group">
                     <label for="username">用户名</label>
-                    <input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名" data-error="请填写用户名" required autofocus>
+                    <input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名" data-remote="/api/username_check/" data-remote-error="该用户名已被注册！" data-error="请填写用户名" required autofocus>
                     <div class="help-block with-errors"></div>
                 </div>
                 <div class="form-group">
@@ -17,7 +17,7 @@
                 </div>
                 <div class="form-group">
                     <label for="email">邮箱地址</label>
-                    <input type="email" class="form-control input-lg" id="email" name="email" placeholder="邮箱地址" data-error="请填写正确的邮箱地址" required>
+                    <input type="email" class="form-control input-lg" id="email" name="email" placeholder="邮箱地址" data-remote="/api/email_check/" data-remote-error="该邮箱已被注册！" data-error="请填写正确的邮箱地址" required>
                     <div class="help-block with-errors"></div>
                 </div>
                 <div class="form-group">