So verwenden Sie das Validate-Plugin in jQuery

Im Folgenden werde ich Ihnen ein Beispiel für die Ajax-Methode des jQuery Validate-Plugins zur Validierung von Eingabewerten vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

In Projekten stoßen wir häufig auf Probleme, die eine Hintergrundüberprüfung erfordern, z. B. ob der Benutzername und das Benutzerkonto vorhanden sind usw. Verwenden Sie das jQuery Validate-Plug-in, um die Überprüfung mithilfe von Remote-Überprüfungsregeln abzuschließen.

Beispiel:

1. Grundlegende Verwendung

1 Formular

<form id="registForm">
 <input type="text" id="username" name="username">
</form>

2.js

Die einfachste und gröbste Art, es zu schreiben, ist remote: URL URL wird automatisch gespleißt, zum Beispiel die folgende Schreibmethode, die angeforderte URL ist: xxx/checkUsername.do?username=test

// 导入jquery、validte库略
$(function() {
    $.validator.setDefaults({
        submitHandler: function(form) {
            // 验证通过处理
            ...
        }
    });

    $("#registForm").validate({
        rules: {
            username: {
                required: true,
                remote: "checkUsername.do"
            },
        },
        messages: {
            username: {
                required: "用户名不能为空",
                remote: "用户名已经存在"
            }
        }
    });
});

3.

Die Hintergrundantwort kann nur „true“ oder „false“ ausgeben und keine anderen Daten enthalten: „true“: Überprüfung bestanden, „false“: Überprüfung fehlgeschlagen; Sie können den Rückgabetyp auf „Boolean“ oder „String“ festlegen >(1). Return boolean

@RequestMapping("/checkUsername")
public @ResponseBody boolean checkUsername(@RequestParam String username) {
    // 测试
    return !"test".equals(username);
}

(2).Return String

2 Die obige Verwendung kann die tatsächlichen Anforderungen nicht erfüllen. Wenn Sie andere Parameter übermitteln müssen, der Parametername und der Attributname inkonsistent sind oder die Anforderungsmethode POST ist, lautet die Schreibmethode wie folgt:

1.js

Verwenden Sie die Datenoption, die jQuery ist. Die Schreibmethode von $.ajax({...});

übermittelt Daten über Funktionsrückgabewerte und dort gibt es ein Problem beim direkten Schreiben des Werts;

übermittelt standardmäßig den aktuellen überprüften Wert, d. h. Benutzername: xxx im folgenden Beispiel wird standardmäßig als Parameter übermittelt

@RequestMapping("/checkUsername")
public @ResponseBody String checkUsername(@RequestParam String username) {
    // 测试
    return !"test".equals(username) ? "true" : "false";
}

2. Der Hintergrund

beschränkt die Anfrage auf den POST-Modus

....
username: {
    required: true,
    remote: {
        url: "checkUsername.do",
        type: "post",    //数据发送方式
        dataType: "json",   //接受数据格式
        data: {      //要传递的数据
            username: function() {
                return $("#username").val();
            },
            extra: function() {
                return "额外信息";
            }
         }
    }
}

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Informationen zur Verwendung von bootstrap-table.js zur Implementierung der erweiterten Paging-Symbolleistenfunktion

So implementieren Sie eine schwebende Kollision in JS

So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Validate-Plugin in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!