Heim > Web-Frontend > js-Tutorial > So verwenden Sie die benutzerdefinierte Validierung von jQuery Validate

So verwenden Sie die benutzerdefinierte Validierung von jQuery Validate

DDD
Freigeben: 2023-06-25 17:33:46
Original
1733 Leute haben es durchsucht

Benutzerdefinierte Validierungsschritte für jQuery: 1. Führen Sie die jQuery-Bibliothek und die jQuery-Validierungs-Plug-in-Bibliothek ein. 2. Schreiben Sie HTML-Formularcode und fügen Sie Klassen und benutzerdefinierte Validierungsregeln für die Felder hinzu, die überprüft werden müssen -in in JavaScript und fügen Sie eine benutzerdefinierte Validierungsmethode hinzu.

So verwenden Sie die benutzerdefinierte Validierung von jQuery Validate

Die Schritte zum Anpassen der Validierung mit jQuery sind wie folgt:

1. Stellen Sie die jQuery-Bibliothek und die jQuery-Validierungs-Plug-in-Bibliothek vor.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
Nach dem Login kopieren

2. Schreiben Sie HTML-Formularcode und fügen Sie Klassen und benutzerdefinierte Validierungsregeln für Felder hinzu, die validiert werden müssen.

<form id="myForm">
<input type="text" name="username" class="required">
<input type="text" name="age" class="required customNumber">
<input type="submit" value="Submit">
</form>
Nach dem Login kopieren

3. Initialisieren Sie das Validierungs-Plugin in JavaScript und fügen Sie eine benutzerdefinierte Validierungsmethode hinzu.

$(document).ready(function () {
// 验证规则
$.validator.addMethod("customNumber", function (value, element) {
return /^[-+]?(\d+|\d+\.\d*|\d*\.\d+)$/.test(value);
}, "请输入有效的数字");
// 初始化validate插件
$("#myForm").validate();
});
Nach dem Login kopieren

4. Optional: Passen Sie die Verifizierungsfehlermeldung an.

$(document).ready(function () {
// 自定义错误提示信息
$.extend($.validator.messages, {
required: "该字段不能为空",
customNumber: "请输入有效的数字"
});
// 初始化validate插件
$("#myForm").validate();
});
Nach dem Login kopieren

Wenn der Benutzer nun das Formular absendet, überprüft die jQuery-Validierung automatisch, ob jedes Feld den Regeln entspricht, und zeigt die entsprechende Fehlermeldung an. Benutzerdefinierte Verifizierungsmethoden führen die Verifizierung anhand benutzerdefinierter Verifizierungsregeln durch und zeigen benutzerdefinierte Fehlermeldungen an

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die benutzerdefinierte Validierung von jQuery Validate. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage