• true: Lorsque le navigateur place le champ de vérification natif;
• : Lorsque le navigateur ne vérifie pas le champ; false
: Lorsque le navigateur ne prend pas en charge la vérification native HTML5, tels que IE8.
• undefined
étant donné que nous avons désactivé la vérification native ci-dessus, chaque champ retournera

, qui traversera tous les champs et vérifiera si la vérification native est disponible: false validateForm La boucle itérates représente tous les champs dans une seule collection

var form = document.getElementById("myform");
form.noValidate = true;

// 設置處理程序以在提交時驗證表單
// onsubmit 用于更輕松的跨瀏覽器兼容性
form.onsubmit = validateForm;

elements

function validateForm(event) {

    // 獲取跨瀏覽器事件對象和表單節(jié)點
    event = (event ? event : window.event);
    var
        form = (event.target ? event.target : event.srcElement),
        f, field, formvalid = true;

    // 循環(huán)所有字段
    for (f = 0; f < form.elements.length; f++) {
        // 獲取字段
        field = form.elements[f];

        // 忽略按鈕、字段集等
        if (field.nodeName !== "INPUT" && field.nodeName !== "TEXTAREA" && field.nodeName !== "SELECT") continue;

        // 原生瀏覽器驗證可用嗎？
        if (typeof field.willValidate !== "undefined") {

            // 原生驗證可用

        }
        else {

            // 原生驗證不可用

        }
    }
}

! Nous savons maintenant que le code à l'intérieur du premier bloc de code sera évalué lorsqu'il peut être utilisé avec la validation native. Mais ... false undefined field.willValidate Le navigateur prend-il en charge les types d'entrée?

Si vous lisez la première partie, vous vous souviendrez que les types d'entrée qui ne sont pas pris en charge retombent au texte. Par exemple:

Aucun support natif dans Firefox 29 ou IE11. Ces navigateurs rendront (efficacement):

// 原生瀏覽器驗證可用嗎？
        if (typeof field.willValidate !== "undefined") {

            // 原生驗證可用

        }
        else {

            // 原生驗證不可用

        }

Cependant, les deux navigateurs prennent en charge la vérification du type de texte, donc

<input type="date" name="dob" />

correspondent aux attributs field.willValidate de l'objet - s'ils ne correspondent pas, nous devons implémenter la vérification de secours héritée, par exemple: undefined type .type

<input type="text" name="dob" />

.checkValidity() Si une vérification native est disponible, vous pouvez exécuter la méthode pour vérifier le champ. S'il n'y a pas de problème, la méthode renvoie

. Il existe également une méthode .checkValidity() similaire qui renvoie l'état actuel sans rechapage, bien que cela ne soit pas très utile et n'est pas pris en charge par tous les navigateurs. Ces deux méthodes seront également: true false .reportValidity() Définissez l'objet

Lorsque la vérification échoue, l'événement
1. est tiré sur le terrain. Cela peut être utilisé pour afficher les erreurs, modifier les couleurs, etc. Notez qu'il n'y a pas d'événement .validity correspondant, alors n'oubliez pas de réinitialiser le style d'erreur et le message si nécessaire.
2. invalid valid champ
objet

Les objets ont les propriétés suivantes: .validity

.valid - Renvoie true s'il n'y a pas d'erreur dans le champ, sinon renvoie false. .valueMissing - Renvoie true Si le champ est requis mais qu'aucune valeur n'est saisie. .typeMismatch - Renvoie true Si la valeur n'est pas la syntaxe correcte (par exemple, une adresse e-mail mal formée). .patternMismatch - Renvoie pattern Si la valeur ne correspond pas à l'expression régulière de l'attribut true. .tooLong - Renvoie maxlength si la valeur est plus longue que le permis true. .tooShort - Renvoie minlength si la valeur est plus courte que le permis true. .rangeUnderflow - Si la valeur est inférieure à min, retournez true. .rangeOverflow - Si la valeur est supérieure à max, retournez true. .stepMismatch - Si la valeur ne correspond pas à step, retournez true. .badInput - Si l'entrée ne peut pas être convertie en valeur, elle renvoie true. .customError - Renvoie true Si une erreur personnalisée est définie dans le champ.

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!