Pratique HTML5 et analyse des formulaires

HTML5 a également apporté quelques améliorations au formulaire, en ajoutant de nouvelles fonctions de vérification des données et en ajoutant de nouveaux attributs de balise. Avec ces fonctions de validation, vous pouvez effectuer une validation sans JavaScript Même si JavaScript est désactivé, vous pouvez valider le formulaire sans aucune pression. Les développeurs n'utilisent pas JavaScript ; le navigateur effectue une validation basée sur les règles du balisage et affiche le message d'erreur approprié. Ces fonctionnalités conviviales ne sont efficaces que dans les navigateurs prenant en charge HTML5. Les navigateurs pris en charge incluent Opera 10, Safari 5, Chrome et Firefox 4.

Les fonctionnalités de formulaire nouvellement ajoutées dans HTML5 incluent : d'autres types de saisie, des modes de saisie, des plages de valeurs, des champs obligatoires, la désactivation de la validation et la vérification de la validité. Ci-dessous, nous présenterons ces fonctions en détail.

1. Autres types d'entrée

Lorsqu'il s'agit de types d'entrée, tout le monde pensera rapidement à la balise d'entrée. Seules les balises d'entrée peuvent spécifier différents types. HTML5 ajoute simplement de nouvelles valeurs d'attribut à l'attribut type dans l'entrée. Ces nouvelles valeurs d'attribut peuvent non seulement refléter les informations sur le type de données, mais également fournir certaines fonctions de validation par défaut. Parmi eux, « email » et « url » sont les deux types les plus pris en charge, et chaque navigateur a également ajouté des mécanismes de vérification personnalisés pour eux. Les types nouvellement ajoutés sont les suivants

　e-mail : La zone de texte de l'e-mail n'est pas différente de la zone de texte ordinaire. Lorsque la saisie n'est pas un e-mail, la vérification échoue. Le clavier mobile va changer

　tel : numéro de téléphone

　url : URL de la page web

　recherche : Moteur de recherche. Après avoir saisi du texte sous Chrome, il y aura un

numéro

fermé supplémentaire : zone de saisie qui ne peut contenir que des chiffres　

couleur

 : sélecteur de couleur　

datetime

: Afficher la date complète　

datetime-local

: Afficher la date complète sans fuseau horaire　

time

: Afficher l'heure sans fuseau horaire　

date

: Affichage date　

semaine

: Affichage semaine　

mois

: Affichage mois

Petit exemple de code HTML

Mode de saisie HTML5 non ajoute seulement quelques nouveaux types d'entrée ; un nouvel attribut est ajouté : l'attribut pattern. La valeur de l'attribut Patten est une expression régulière utilisée pour correspondre à la valeur de la zone de texte. Lorsque vous écrivez des expressions régulières, veillez à ne pas ajouter de symboles ^ et $ au début et à la fin (en supposant qu'ils existent déjà). Ces deux symboles indiquent que la valeur saisie doit correspondre au modèle du début à la fin. Un petit exemple est le suivant

<form action="http://www.baidu.com">
    <input type="email" />
    <input type="tel" />
    <input type="url" />
    <input type="search"/>
    <input type="range" min="0" max="10" step="2" />
    <input type="number"/>
    <input type="color"/>
    <input type="date"/>
    <input type="datetime"/>
    <input type="datetime-local"/>
    <input type="time"/>
    <input type="month"/>
    <input type="week"/>
    <!-- placeholder是让密码输入框拥有默认提示 -->
    <input type="password" placeholder="请输入密码"/>
    <input type="submit"/>
</form>

Code HTML

Effet d'aperçu Chrome

<form action="#">
    <input type="text" name="user" pattern="\d{1,9}"/>
    <!-- 点击之后 会本页面提交-->
    <input type="submit"/>
</form>

3. Plage de valeurs

En plus de "e-mail" et "url". , HTML5 définit également plusieurs éléments d'entrée supplémentaires. Chacun de ces éléments nécessite de renseigner une sorte de valeur numérique. Mais la compatibilité du navigateur avec ces valeurs nouvellement ajoutées n'est pas très bonne. Ainsi, pour les éléments d'entrée de ces types numériques, vous pouvez spécifier l'attribut min (la plus petite valeur possible), l'attribut max (la plus grande valeur possible) et l'attribut step (la différence entre les deux échelles de min à max). Un petit exemple est le suivant

Code HTML

Code JavaScript

<input type="range" min="0" max="10" step="2" id="range" />

4. Champs obligatoires Spécifiez l'attribut obligatoire dans le champ du formulaire pour indiquer à l'utilisateur qu'il s'agit d'un champ obligatoire et qu'il ne peut pas être utilisé. être vide. Cet attribut s'applique aux balises d'entrée, aux balises textarea et aux balises de sélection (prises en charge par Opera 12). En JavaScript, vous pouvez vérifier si un formulaire est requis via l'attribut requis.

Différents navigateurs gèrent différemment les champs obligatoires vides. Opera 11 et Firefox 4 empêcheront la soumission de formulaire et afficheront une boîte d'aide sous le champ correspondant, tandis que Chrome (avant 9) et Safari (avant 5) ne font rien et n'empêchent pas la soumission de formulaire. Un petit exemple est le suivant

var oInput=document.getElementById("range");
oInput.stepUp() //每次加1
oInput.stepUp(5) //每次加5
oInput.stepDown() //每次减1
oInput.stepDown(10) //每次减10

Code HTML

Code JavaScript

<input type="text" id="text" required/>

5. Désactiver la validation En ajoutant l'attribut novalidate à la balise form, vous pouvez empêcher le formulaire de se valider. Vous pouvez utiliser novalidate pour l'obtenir en JavaScript. S'il existe, c'est vrai, sinon c'est faux. S'il y a plusieurs boutons de soumission, afin de spécifier que cliquer sur un certain bouton de soumission ne nécessite pas de validation du formulaire, vous pouvez ajouter l'attribut formnovalidate au bouton correspondant. Les attributs qui désactivent la validation peuvent également être ajoutés à l'aide de JavaScript. Un petit exemple est le suivant

//检验是否支持必填属性
//支持的为true ，不支持的为false
var is = "required" in document.createElement("input");

Code HTML

	<input type="text" id="text" required/>
    


	<input type="text" id="text" required/>
    

6、检测有效性，及新添属性和方法

　　在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法，如果字段的值是有效的，这份方法会返回true，否则则是false。与checkValidity()方法相比，validity属性可以告诉你很多东西。

　　valueMissing : 输入值为空时

　　typeMismatch : 控件值与预期类型不匹配

　　patternMismatch : 输入值不满足pattern正则

　　tooLong : 超过maxLength最大限制

　　rangeUnderflow : 验证的range最小值

　　rangeOverflow：验证的range最大值

　　stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

　　customError： 不符合自定义验证，是否设置setCustomValidity(); 自定义验证

　　placeholder : 输入框提示信息

　　autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off

　　autofocus : 指定表单获取输入焦点

　　list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id

　　Formaction : 在submit里定义提交地址

小例子JavaScript代码

if(input.validity && !input.validity.valid){
	if(input.validity.valueMissing){
		alert("不能为空")
	}else if(input.validity.typeMismatch){
		alert("控件值与预期类型不匹配");
	}
}

　　Pratique HTML5 et analyse des formulaires就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（www.php.cn）！