HTML5 offre un grand degré d'optimisation pour les formulaires, qu'il s'agisse de sémantique, de widgets ou de vérification du format des données. Je suppose que vous utiliserez certainement la compatibilité du navigateur comme excuse pour ne pas utiliser ces "nouvelles fonctionnalités", mais cela ne devrait jamais être une raison de stagnation. De plus, il existe des bibliothèques d'outils comme Modernizr et ployfill pour vous aider lorsqu'elles ne sont pas prises en charge. traitement de repli sur les navigateurs HTML5. Lorsque vous testerez réellement ces nouvelles fonctionnalités de formulaire, je vous garantis que vous en tomberez amoureux. Si le seul défaut est que le style de la bo?te de dialogue est celui par défaut du navigateur et que vous ne pouvez pas le modifier, eh bien, si vous croyez au niveau esthétique des concepteurs des fabricants de navigateurs (je pense que leur niveau de conception est meilleur que cela de la plupart des gens ordinaires) Mieux, si vous ne considérez pas la compatibilité des styles), apprenez-le rapidement?!
Validation native
type d'entrée
HTML5 fournit de nombreux supports natifs pour la validation du format de données, par exemple?:
<input type='email'/>
Lorsque vous cliquez sur le bouton Soumettre, si le format que vous saisissez ne correspond pas à l'e-mail, celui-ci ne sera pas soumis et le navigateur vous affichera un message d'erreur.
Par exemple, sous chrome?:
Remarque?:
1. La vérification du navigateur ne sera déclenchée que lorsque vous soumettez
Différents navigateurs Le comportement. les styles des informations d'invite sont différents
3. Lorsque plusieurs entrées ne répondent pas aux exigences, seule une erreur sera demandée. Généralement, la saisie relativement antérieure dans le formulaire sera demandée
Ne la prenez pas. il va de soi que lorsque l'entrée Lorsque le type est égal à tel, si l'entrée que vous entrez n'est pas au format du numéro de téléphone, elle sera bloquée par le navigateur et un message d'erreur sera affiché lors de la soumission Type='tel' uniquement. joue un r?le sémantique c?té PC, mais peut être utilisé c?té mobile Faire du clavier généré un clavier purement numérique ne joue aucun r?le dans la vérification des données.
modèle
Vous pouvez utiliser l'attribut pattern pour définir une validation de format personnalisée pour les formats de données que le navigateur ne fournit pas de validation native. La valeur de l'attribut pattern est une expression régulière (cha?ne) :
<input type='tel' pattern='[0-9]{11}' title='請(qǐng)輸入11位電話(huà)號(hào)碼'>Lorsque vous cliquez sur soumettre, si les données que vous saisissez ne sont pas conformes au format régulier dans pattern, le navigateur empêchera le formulaire n'est pas soumis et demande?: "Veuillez le maintenir cohérent avec le format demandé" (petits caractères) dans le titre. Mais notez que lorsque le contenu de votre zone de texte est vide, le navigateur ne le vérifiera pas et soumettra directement le formulaire (car le navigateur pense que cette zone n'est pas obligatoire). Si vous souhaitez que cette bo?te ait du contenu, ajoutez l'attribut requis.
Grace au système de vérification natif HTML, nous pouvons essentiellement respecter nos restrictions sur la soumission de formulaires. Mais HTML5 fournit des fonctions plus avancées pour faciliter notre développement et améliorer l'expérience utilisateur.
API de validation de contrainte
Message d'invite par défaut
La cha?ne de message d'invite du navigateur telle que "Veuillez être cohérent avec le format demandé" est masquée dans le DOM d'entrée dans le message de validation attribut de l'objet, cet attribut est en lecture seule dans la plupart des navigateurs modernes, c'est-à-dire qu'il ne peut pas être modifié, comme le code suivant?:
<input type="text" required id='input'/>
Lors de la soumission, si le contenu d'entrée est S'il est vide, le navigateur demandera ? Veuillez remplir ce champ ?. Nous pouvons imprimer cette phrase sur la console?:
var input = document.getElementById('input')
input.validationMessage // =>'請(qǐng)?zhí)顚?xiě)此字段'
Si vous souhaitez modifier le contenu, vous pouvez appeler l'interface setCustomValidity. pour le changer. La valeur de validationMessage
input.setCustomValidity('這個(gè)字段必須填上哦');
// 下面這種做法適用于不支持setCustomValidity的瀏覽器，基本現(xiàn)代瀏覽器都不支持這樣做
input.validationMessage = '這個(gè)字段必須填上哦'
Notez que bien que la validation native HTML comme requise puisse modifier les informations, elle ne peut pas définir les informations sur une cha?ne vide, pour les raisons qui seront discutées ci-dessous. .
Principe
Le système de validation de formulaire HTML utilise l'attribut validationMessage pour détecter si les données dans la zone de texte réussissent la vérification. Si sa valeur est une cha?ne vide, cela signifie que la vérification a réussi, sinon, cela signifie qu'il n'a pas réussi. Le navigateur indiquera à l'utilisateur sa valeur sous forme de message d'erreur. Par conséquent, lors de la vérification native, les utilisateurs ne peuvent pas définir la valeur de validationMessage sur une cha?ne vide.
Un exemple simple de l'API de vérification de contraintes
L'API de vérification de contraintes est une expression plus flexible en plus de la méthode native. Vous pouvez définir si les données sont transmises sans recourir à des expressions régulières. Le principe est très simple. Si vous jugez par if, si le format des données vous satisfait, alors vous appelez setCustomValidity pour rendre la valeur de validationMessage vide. Sinon, vous appelez setCustomValidity pour transmettre le message d'erreur :
<. ??>
input.addEventListener('input', function () {
if(this.value.length > 3){ // 判斷條件完全自定義
input.setCustomValidity('格式不正確');
}else {
input.setCustomValidity('')
}
}); Chaque fois qu'il y a une saisie au clavier, le code déterminera si le format est correct, puis appellera setCustomValidity pour définir la valeur de validationMessage. Ne présumez pas que le navigateur vous demandera si le résultat est correct à chaque fois que vous appuyez sur le bouton. Le navigateur vous demandera uniquement la valeur du message de validation (le cas échéant) lorsque vous cliquez sur le bouton Soumettre.
Si vous n'y avez pas encore pensé, vous vous demanderez certainement, dans ce cas, pourquoi avez-vous besoin de lier les événements du clavier à la saisie et de porter un jugement à chaque fois que vous saisissez?? Il est bon de lier directement l'événement de soumission au formulaire, puis de juger de sa qualité lors de la soumission. Ne vous inquiétez pas, c'est avantageux de le faire.
Juger du format et du style ainsi que de la saisie En tant qu'utilisateurs, nous voulons bien s?r que la zone de texte devienne rouge (ou ait d'autres invites) après avoir su que j'ai entré le mauvais format. Et chaque fois que je saisis un caractère, s'il est correct, la zone de texte revient à la normale. On peut utiliser des pseudo-classes CSS pour réaliser cette fonction :
input:required {
background-color: #FFE14D;
}
/*這個(gè)偽類(lèi)通過(guò)validationMessage屬性進(jìn)行判斷*/
input:invalid {
border: 2px solid red;
}上面的required偽類(lèi)會(huì)給所以必填但值空的input提供一個(gè)黃色的背景色，而下面的invalid偽類(lèi)則會(huì)為所有未通過(guò)驗(yàn)證的input添加一個(gè)2px的紅邊邊。我們現(xiàn)在給我們的Input框加上input類(lèi)即可。
這些偽類(lèi)的判斷條件正與瀏覽器判斷你能否提交表單的條件一樣，看validationMessage里的值，所以，我們上面設(shè)置每次鍵盤(pán)輸入事件都會(huì)觸發(fā)一次判斷從而改變CSS偽類(lèi)樣式的渲染，用意正在于此。
更好的用戶(hù)體驗(yàn)
還有一個(gè)缺點(diǎn)，就是當(dāng)一個(gè)input設(shè)置為required的時(shí)候，在初始化時(shí)，因?yàn)槠浔旧硎强盏模詉nvalid偽類(lèi)會(huì)對(duì)它起作用，這不是我們想看到的，因?yàn)槲覀兪裁催€都沒(méi)有干。
我們可以并在這些偽類(lèi)前加上父選擇器.invalid，這樣，只有在父元素具有invalid類(lèi)時(shí)，這些偽類(lèi)才會(huì)起作用?？梢栽O(shè)置一個(gè)submit事件，在表單提交因驗(yàn)證失敗后，會(huì)觸發(fā)input的invalid事件，給form添加invalid類(lèi)：
form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)因?yàn)閕nvaild是Input的事件，而不是form的事件，所以這里我們?cè)O(shè)置第三個(gè)參數(shù)為true采用事件捕獲的方式處理之。這樣，就大功告成了。
最終實(shí)例
好了，現(xiàn)在是時(shí)候總結(jié)一下我們所學(xué)的知識(shí)并創(chuàng)造最佳實(shí)踐了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<style>
input:required{
background-color: #DCD4CE;
}
.invalid input:invalid{
border: 2px solid red;
}
</style>
</head>
<body>
<form id="form">
<label>email:<input type="email" required id="email"></label>
<label>IDCard:<input required id="IDCard"></label>
<input type="submit" id="submit">
</form>
<script>
var email = document.getElementById('email');
var IDCard = document.getElementById('IDCard');
var form = document.getElementById('form');
IDCard.addEventListener('input', function () {
if(this.value.length != 6) {
this.setCustomValidity('IDCard的長(zhǎng)度必須為6')
}else{
this.setCustomValidity('')
}
});
form.addEventListener('invalid', function () {
this.className = 'invalid';
}, true)
</script>
</body>
</html>運(yùn)行后截圖如下：
以上就是HTML5利用約束驗(yàn)證API來(lái)檢查表單的輸入數(shù)據(jù)的代碼實(shí)例?的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！