La validation jQuery valide uniquement sur le formulaire Soumettre

Lorsque vous utilisez le plugin de vérification jQuery, vous pouvez ressentir du bégaiement de vérification lors de la saisie du champ de saisie. Ceci est le plus courant lors de l'utilisation de règles de vérification personnalisées déclenchant une demande AJAX pour vérifier l'entrée de l'utilisateur (par exemple, la vérification si l'e-mail de l'utilisateur est unique dans la base de données). L'expérience de décalage a été horrible. Pour éliminer les contrôles de vérification continue, ajoutez les paramètres suivants à la fonction de vérification du formulaire:

<code class="language-javascript">onkeyup: false,
onclick: false,
onfocusout: false,</code>

Par conséquent, votre fonction de vérification peut ressembler à ceci:

<code class="language-javascript">$("#form").validate({
    onkeyup: false,
    onclick: false,
    onfocusout: false,

    // 验证规则
    rules: {
        // ...
    },

    // 验证消息
    messages: {
        // ...
    },

    // 提交处理程序
    submitHandler: function(form) {
        // ...
    }
});</code>

Autres options $.validate()

<code class="language-javascript">messages: {},
groups: {},
rules: {},
errorClass: "error",
validClass: "valid",
errorElement: "label",
focusInvalid: true,
errorContainer: $([]),
errorLabelContainer: $([]),
onsubmit: true,
ignore: ":hidden",
ignoreTitle: false,
onfocusin: function(element, event) { ... },
onfocusout: function(element, event) { ... },
onkeyup: function(element, event) { ... },
onclick: function(element, event) { ... },
highlight: function(element, errorClass, validClass) { ... },
unhighlight: function(element, errorClass, validClass) { ... }</code>

Les questions fréquemment posées pour la vérification JQuery et la soumission du formulaire (FAQ)

Comment personnaliser les messages d'erreur dans la vérification jQuery?

Le plugin de vérification jQuery vous permet de personnaliser les messages d'erreur au besoin. Vous pouvez le faire en utilisant l'option .validate() dans la méthode messages. Les exemples sont les suivants:

<code class="language-javascript">$("#myForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2
        }
    },
    messages: {
        name: {
            required: "请输入您的姓名",
            minlength: "您的姓名必须至少包含 2 个字符"
        }
    }
});</code>

Dans cet exemple, si le champ "Nom" est vide, un message d'erreur personnalisé "Veuillez entrer votre nom" s'affiche. Si le champ "Nom" est inférieur à 2 caractères, votre nom doit contenir au moins 2 caractères ".

Comment utiliser la validation jQuery sur plusieurs formulaires sur la même page?

Vous pouvez utiliser la validation jQuery pour plusieurs formulaires sur la même page en appelant la méthode .validate() séparément pour chaque formulaire. Les exemples sont les suivants:

<code class="language-javascript">$("#form1").validate({
    // form1 的规则和消息
});

$("#form2").validate({
    // form2 的规则和消息
});</code>

Dans cet exemple, #form1 et #form2 sont les ID des deux formes. Vous pouvez définir des règles de validation et des messages distincts pour chaque formulaire.

Comment utiliser la vérification jQuery avec Ajax?

Vous pouvez utiliser la vérification jQuery avec ajax en utilisant l'option .validate() dans la méthode submitHandler. Lorsque le formulaire est valide, la fonction submitHandler est appelée, où vous pouvez soumettre le formulaire via Ajax. Les exemples sont les suivants:

<code class="language-javascript">$("#myForm").validate({
    rules: {
        // 您的规则
    },
    messages: {
        // 您的消息
    },
    submitHandler: function(form) {
        $.ajax({
            type: "POST",
            url: "/your-url",
            data: $(form).serialize(),
            success: function(response) {
                // 处理响应
            }
        });
    }
});</code>

Dans cet exemple, lorsque le formulaire est valide, il sera soumis à l'URL "/ your-url" via ajax. La méthode $(form).serialize() est utilisée pour créer une chaîne de texte d'une notation codée par URL standard.

Le reste du contenu FAQ est cohérent avec le texte d'origine. Vous pouvez copier et coller les parties FAQ restantes du texte d'origine ici au besoin pour compléter la pseudo-originalisation de l'ensemble du document. Notez que les réponses à chaque FAQ sont légèrement ajustées verbalement pour la rendre différente du texte d'origine, mais avec la même signification.

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!