Comment utiliser jquery validate validation personnalisée

jquery validate Étapes de validation personnalisées : 1. Présentez la bibliothèque jQuery et la bibliothèque de plug-ins jQuery validate ; 2. Écrivez le code du formulaire HTML et ajoutez des classes et des règles de validation personnalisées pour les champs qui doivent être validés ; . Initialisez le plug-in de validation en JavaScript et ajoutez une méthode de validation personnalisée ; 4.

Les étapes pour utiliser jQuery validate pour personnaliser les validations sont les suivantes :

1. Présentez la bibliothèque jQuery et la bibliothèque de plug-ins de validation jQuery.

<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. Écrivez le code du formulaire HTML et ajoutez des classes et des règles de validation personnalisées pour les champs qui doivent être validés.

<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. Initialisez le plugin de validation en JavaScript et ajoutez une méthode de validation personnalisée.

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

4. Facultatif : Personnalisez le message d'erreur de vérification.

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

Désormais, lorsque l'utilisateur soumettra le formulaire, jQuery validate vérifiera automatiquement si chaque champ est conforme aux règles et affichera le message d'erreur correspondant. La méthode de vérification personnalisée vérifiera selon les règles de vérification personnalisées et affichera le message d'erreur personnalisé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!