Django的。 使用Jquery Validate和Ajax確保用戶名唯一

Question

我想使用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: {
        ...
});

並在views.py中：

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'))

這不起作用，它的行為就像用戶名字段包含錯誤並始終顯示錯誤消息一樣。

Answer 1

只需使用插件中包含的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字符串，它將成為錯誤消息，否則，將顯示默認錯誤消息。

通過jQuery.ajax （XMLHttpRequest）調用服務器端資源，並獲取對應於已驗證元素的名稱及其值作為GET參數的鍵/值對。 使用默認消息，響應被評估為JSON ，對於有效元素必須為true對於無效元素可以為false ， undefined或null 。 或字符串，例如 錯誤消息顯示"That name is already taken, try peter123 instead" 。

---

旁注回答您的自定義解決方案被破壞的原因：

報價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等）來自定義消息。