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.
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>
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>
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();
});4. Optional: Passen Sie die Verifizierungsfehlermeldung an.
$(document).ready(function () {
// 自定义错误提示信息
$.extend($.validator.messages, {
required: "该字段不能为空",
customNumber: "请输入有效的数字"
});
// 初始化validate插件
$("#myForm").validate();
});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!
