在Django中调用Ajax以查看用户是否已经存在

2024-05-16 18:15:54 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在验证用户在onblur事件中将其电子邮件地址放入字段时是否已经存在。我还使用了一个外部JS文件,它将ajax请求发送到指定的url。然而,它不起作用。当我开始在字段中输入时,它告诉我电子邮件地址已经存在。我这样做对吗

代码如下:

views.py

  def validate_stud_username(request):
       if request.is_ajax():
     username = request.GET.get('stud_email', None)
     response = {
                'is_taken': 
            User.objects.filter(username__iexact=username).exists()
            }
      return JsonResponse(response)

url.py

urlpatterns = [
    path('', views.home, name="home"),
    path('login/', views.login, name="login"),
    path('signup/', views.signup, name="signup"),
    path('validate_stud_username', views.validate_stud_username, 
name='validate_stud_username'),
]

signup.html

<form action="{% url 'signup' %}" id="stud_registration_form" 
 method="POST" data-url="{% url 'validate_stud_username' %}">
 {% csrf_token %}
                           
 <input type="email" id="stud_email" style="color: black;" 
 name="stud_email" value="" placeholder=" Email" 
 autocapitalize="none" required>
 <span style="color: red;" class="error_form" id="stud_email_err"> 
 </span>

 <button class="btn btn-primary btn-block login_btn" type="submit" 
 style="padding: 2% 0;"> Sign Up </button>

 </form>
 

form_validations.js

  $("#stud_email").blur(function () {
    $.ajax({
      data: $(this).serialize(),
      url: $("form#stud_registration_form").data("url"),

      success: function (response) {
        $("#stud_email").removeClass("valid taken");
        if (response.is_taken == true) {
          $("#stud_email").addClass("taken");
        } else {
          $("#stud_email").addClass("valid");
        }
          check_stud_email();
      },
      error: function (response) {
        console.log(response.responseJSON.errors);
      },
    });
  });

function check_stud_email() {
    var pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var email = $("#stud_email").val();

    if (pattern.test(email)) {
     $("#stud_email_err").hide();
     $("#stud_email").css("border-bottom", "2px solid #34F458");
      return false;
    } else {
      if (!$("#stud_email").val()) {
        $("#stud_email_err").html("Email cannot be blank");
      }

      if ($("#stud_email").hasClass("taken")) {
        $("#stud_email_err").html(
          "Email address already exists! Use another one or log in"
        );
      } else {
        $("#stud_email_err").html("Invalid email address");
      }
        $("#stud_email_err").show();
        $("#stud_email").css("border-bottom", "2px solid #F90A0A");
      return true;
    } 
  }

                                   
                                    

Tags: pathnameformurlifemailresponseusername