Exemple simple de validation de formulaire à l'aide des astuces du didacticiel HTML5_html5

HTML5 fournit l'attribut pattern pour les éléments de formulaire, qui accepte une expression régulière. Lorsque le formulaire est soumis, cette expression régulière sera utilisée pour vérifier que la valeur du formulaire n'est pas vide. Si la valeur du contrôle ne correspond pas à cette expression régulière, une boîte de dialogue apparaîtra et l'expression sera empêchée. en cours de soumission. Le texte de la zone d'invite peut être personnalisé à l'aide de la méthode setCustomValidity.
Par exemple, dans le formulaire ci-dessous, la zone de texte n'accepte que les numéros de téléphone mobile du continent. Si vous saisissez d'autres éléments, vous ne pouvez pas le soumettre
Exécuter

.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. >
2. <formulaire>
3. <input id="texte" modèle="^1[3-9]d{9}$" requis />
4. <input id="bouton" type="soumettre" />
5. formulaire>

Notez que seuls les formulaires non vides utiliseront la validation régulière. Si rien n'est saisi, le modèle ne sera pas utilisé, l'assistance requise est donc requise. Mais l'invite qui apparaît à partir de ce code ressemble à ceci :

Seuls les singes peuvent comprendre un texte aussi rapide ! Nous avons donc également besoin d'un texte d'invite plus convivial, défini à l'aide de la méthode setCustomValidity.
Courir

Code XML/HTMLCopier le contenu dans le presse-papiers

1. >  
2. <formulaire>  
3.   <input id="texte"  modèle="^1[3-9]d{9}$" obligatoire  />  
4.   <input id="bouton"  type="soumettre" />
5. formulaire>  
6. <script>  
7. text.oninput=fonction(){   
8.   text.setCustomValidity("");   
9. } ;   
10. text.oninvalid=fonction(){   
11.   text.setCustomValidity("请不要输入火星的手机号好吗？");   
12. } ;   
13. script>  

invalid事件会在表单submit事件之前触发，而提交时会先验Il s'agit d'un test de vérification de la validité de checkValidity.执行验证。
　　上面的例子实不太好，有时候可能需要更详细的提示信息，比如空的时候提示为空、太长的时候提示太长、非数字的时候提示非数字等。这些动作可以通过程序验证后动态地setCustomValidity来实现。
　　其实我觉La version HTML5 de l'API a été conçue pour répondre aux besoins des utilisateurs.

手机页面中表单提交用JavaScript出一个手机端用HTML5的属性来验证的示例：

Code XML/HTML复制内容到剪贴板

1. <input id="nom"  nom="nom" placeholder="nom" obligatoire="" tabindex="1" type="texte">    
2. <input id="email"  nom="e-mail" placeholder="téléphone" obligatoire="" tabindex="2" type="texte" motif="(^(d{3,4}-)?d{7,8})$|^(13|15|18| 14)d{9}$">    
3. <input id="sujet"  nom="sujet" placeholder="exemple@domain.com" obligatoire="" tabindex="2" type="texte">    
4.  // 主要用了HTML的一下属性   
5. // 1.placeholder 提供可描述输入字段预期值的提示信息。 该提示会在输入字段为空时显示,并会在字段获   
6. //得焦点时消失   
7. //2.required 属性规定必需在提交之前填写输入字段   
8. //3.pattern  是正则表达式,  里面可以直接填写正则表达式