2

次の問題に直面しています。サインアップ フォームでは、指定されたユーザー名が既に使用されているかどうかをリモートで確認しようとします。これはうまく機能し、ユーザー名が既に使用されている場合は、エラー クラスを追加しても問題なく動作します。問題は、ユーザー名が既に使用されている場合でも、登録フォームを送信できることです。リモート検証はそれをブロックすべきではありませんか?

これが私の検証コードです。

var validator = $('#register').validate({
    rules: {
        registerUsername: {

            required: true,
            remote: {
            type: 'post',
            url: 'includes/CheckUsername',
            data: {
                username: function() {
                    return $('#registerUsername').val()
                }
            },
            complete: function(data){
                  if( data.responseText != "found" ) {
                      $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
                      return false;
                  }
                  else{
                      $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
                  }
                }
            }
        },
        registerEmail: {
            required: true
        },
        registerPassword: {
            required: true
        }
    },
    messages: {
        registerUsername: {remote: 'tzuwertzut',required: 'asdasd'},
        registerEmail: "",
        registerPassword: ""
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

});
$('#myModal').on('hidden.bs.modal', function () {
  validator.resetForm();
  $('#regEmailGroup').removeClass('has-error').removeClass('has-success');
  $('#regUsernameGroup').removeClass('has-error').removeClass('has-success');
  $('#regPassGroup').removeClass('has-error').removeClass('has-success');

});

ヒントをいただければ幸いです。

4

1 に答える 1

1

メソッドのドキュメントをremote参照してください：

options :これらのオプションは、デフォルト( )
を深く拡張します。指定したオプションは、デフォルトを上書きします。dataType:"json", data:{nameOfTheElement:valueOfTheElement}

と...

応答は JSON として評価され、有効な要素に対してである必要がありtruefalseundefinednull、既定のメッセージを使用して、any 、または無効な要素の場合があります。または文字列。「その名前は既に使用されています。代わりに peter123 を試してください」というエラー メッセージが表示されます。

(上記の「応答」という言葉は、サーバー側コードからの応答を指します)

コードを調べてみましょう。

remote: {
    type: 'post',
    url: 'includes/CheckUsername',
    data: {
        username: function () {
            return $('#registerUsername').val()
        }
    },
    complete: function (data) {
        if (data.responseText != "found") {
            $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
            return false;
        } else {
            $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
        }
    }
}

ご利用にあたってdata:

data: {
    username: function () {
        return $('#registerUsername').val()
    }
}

上記のドキュメントによると、dataオプションのデフォルト値はすでにnameOfTheElement: valueOfTheElementであるため、ここでオーバーライドする必要はまったくありません。構文に問題はありませんが、このオプションが必要になるのは、別のフィールドからのデータと、 の対象フィールドからのデータも送信する必要がある場合のみですremote。例-ユーザー名フィールドをチェックしてremoteいますが、メールアドレスフィールドも一緒に送信する必要があります。

ご利用にあたってcomplete:

complete: function (data) {
    if (data.responseText != "found") {
        $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
        return false;
    } else {
        $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
    }
}

.addClass('has-error').removeClass('has-success')とを指定する必要はまったくありません.removeClass('has-error').addClass('has-success')。remoteルールが合格/不合格ステータスを受け取ると、クラスの適切な適用がすべて自動的に行われます。

あなたのロジックは、応答が一致するかどうかを判断しようとしてい"found"ます。そうでない場合は、 を返しfalseます。一致する場合 (一致"found")、検証に合格する必要があります。ただし、ドキュメントによると、サーバーから文字列が返された場合、検証に「失敗」したと見なされ、文字列がエラー メッセージになります。あなたのreturn false行はルールを完全に無効にするremoteだけだと思います。それがフォームを送信できる理由です。

基本的に、応答が何かに一致するかどうかを手動で確認する必要はまったくありません。true繰り返しになりますが、リモート ルールは単純に、検証に合格した場合はサーバー側の応答を、検証に失敗した場合はfalse, undefined, , または文字列を探します。その後、エラー クラスを含め、nullすべてがプラグインによって自動的に処理されます。

サーバー側のコードが必要な応答を返すように適切に構築されている限り、remoteルールは次のようにするだけで済みます...

remote: {
    type: 'post',
    url: 'includes/CheckUsername'
}
于 2013-11-08T21:22:56.967 に答える