Django.使用Jquery验证和ajax来确保用户名是唯一的

Django. Using Jquery Validate and ajax to make sure username is unique

本文关键字：用户 唯一 确保 Jquery 使用 验证 ajax Django      更新时间：2023-09-26

我想使用jquery validate()来确保没有用户具有相同的昵称(或用户名，在我的模型中它被称为昵称，但它是相同的)。

模型字段看起来像这样:

    nickname = models.CharField(max_length=75, unique=True, null=True)

我想使用ajax，这是javascript:

    $.validator.addMethod("checkNickname", function(){
    var nickname = $("#nickname").val();
    if (nickname == ''){
        return false
    };
    $.ajax({
        type: "GET",
        url: "/profiles/check_nickname/",
        data: {'nickname':nickname},
        success: function(response){
            if (response == "True"){
                return true
            }
            else {
                $("#help_nickname").text("Nickname already exists")
                return false
            }
        }
    })
    });
   $('#form_user').validate({
    rules: {
        nickname: {
            required: true,
            maxlength: 75,
            checkNickname: true,
        }
    },
    errorElement: "span",
    messages: {
        ...
});

和

def check_nickname(request):
if request.is_ajax():
    nickname_new = request.GET.get('nickname', '')
    if Profiles.objects.exclude(user=request.user).filter(nickname=nickname_new).exists():
        return HttpResponse(False)
    else:
        return HttpResponse(True)
else:
    return HttpResponseRedirect(reverse('profiles:login'))

这不起作用，它的行为就好像用户名字段包含一个错误，并一直显示错误消息。

直接使用插件中包含的remote方法

  • 服务器端函数的URL是参数
  • 不需要指定data，因为字段的数据是默认发送的。
  • 不需要指定GET，因为它是默认方法。


$('#form_user').validate({
    rules: {
        nickname: {
            required: true,
            maxlength: 75,
            remote: "/profiles/check_nickname/"
        }
    },
    ....
});

当您希望验证通过时，/profiles/check_nickname/的服务器端功能必须echo或return true。当您希望验证失败时，它必须是echo或return false或JSON字符串。如果您使用JSON字符串，则该JSON字符串将成为错误消息，否则，将显示默认的错误消息。

服务器端资源通过jQuery.ajax (XMLHttpRequest)和项的名称对应的键/值对元素及其作为GET参数的值。响应评估为JSON和必须为true的有效元素，可以是任何false，undefined或null为无效元素，使用默认消息;或一根绳子，如"That name is already taken, try peter123 instead"来显示为错误信息。

边注回答为什么您的自定义解决方案被打破:

Quote OP:

"这不起作用，它的行为就好像用户名字段包含错误并且一直显示错误消息。"

那是因为你没有正确使用addMethod()方法。通过将消息文本插入到元素中，您可以手动绕过插件自动创建和显示错误消息的方式。

自定义错误消息应该是第三个参数，在整个函数之后…

$.validator.addMethod("checkNickname", function(){ // 1st, NAME for method
    // your validation function here               // 2nd, LOGIC for method
}, "Nickname already exists");                     // 3rd, ERROR MESSAGE for method

然后插件将知道如何&何时自动切换消息。如果消息在错误的地方，使用标准的.validate()选项，如errorPlacement, errorElement等来定制它。

相关文章：