validation du formulaire html5

Question

Comment implémenter les cases de vérification natives en HTML5, telles que obligatoire, modèle, etc., lorsque la vérification n'est pas valide ? Pourquoi une boîte de dialogue avec un contenu différent apparaît-elle lorsqu'elle n'est pas valide car différentes contraintes ne sont pas respectées ? Est-il implémenté en combinant l'événement invalide et l'attribut de validité ? Comment fonctionne la méthode setCustomValidity() ? J'ai l'impression que ce contenu devient de plus en plus confus à mesure que je le lis, j'aimerais donc demander conseil à des experts...

Answer 1

Allez voir la vérification du formulaire sur MDN, je pense que c'est assez clair. Vous pouvez suivre la petite démo et vous le comprendrez lentement.

Answer 2

obligatoire : Vérification en blanc, par exemple :

<form>
    <input type="text" required oninvalid="setCustomValidity('此处不能为空！')" oninput=('setCustomValidity()')>
    <input type="submit" value="提交">
</form>

Si la valeur de input[type=text] est vide, une boîte de dialogue apparaîtra et la soumission du formulaire sera empêchée
pattern : correspond à une expression régulière, par exemple :

 ;

<form>
    <input type="text" pattern="[0-9]{3}" oninvalid="setCustomValidity('请输入3个数字！')" oninput=('setCustomValidity()')>
    <input type="submit" value="提交">
</form>

Si la valeur de input[type=text] n'est pas à 3 chiffres, une invite sera émise lorsque vous cliquerez sur le bouton Soumettre