HTML5のpattern属性の使い方を詳しく解説

最近、モバイルページで作業しているときに、数値入力のキーボードで問題が発生しました。以前のアプローチは一律に type="tel" を使用するだけでしたが、九公歌の英語の文字が常に問題に感じていました。電話番号キーボードが邪魔すぎた。そこで、他の実装ソリューションを試してみたかったのですが、最終的な結論はイライラするものでした。ただし、パターンの属性についてさらに学ぶ機会も得ました。

type="tel" と type="number" の違い

まず、最初に発生した問題について説明します。実際、電話番号も番号も完璧ではありません:

type="tel"

利点は、iOS と Android のキーボードのパフォーマンスが似ていることです

欠点は、これらの文字が非常に冗長であることです。強迫性障害ではありませんが、それでも奇妙に感じます。

type="number"

利点は、Androidで実装された実際の数字キーボードであることです

欠点1:iOSでは9マスグリッドキーボードがないため、入力が不便です

欠点2:古いバージョンのAndroid (WeChat で使用される X5 カーネルを含む) では、入力ボックスの後ろに非常に味気ない小さなテールが表示されますが、幸いなことに、Android 4.4.4 以降は削除されました。

しかし、2 番目の欠点については、Webkit のプライベート擬似要素を使用して修正できます:

input[type=number]::-webkit-inner-spin-button,  
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
    }

pattern 属性

pattern は、フォーム入力の内容を検証するために使用されます。通常は、email などの HTML5 の type 属性です。 、tel、number、Data クラス、URL などには、パターンを追加すると、フロントエンド部分の検証がより簡単かつ効率的になります。

明らかに、パターンの属性値には正規表現を使用する必要があります。

例

単純な番号認証

番号認証には 2 つのタイプがあります:

<input type="number" pattern="\d">  
<input type="number" pattern="[0-9]*">

フォーム認証 の場合、これら 2 つの通常のルールは同じ効果がありますが、パフォーマンスは大きく異なります:

iOS では [ 0-9]* は 9 マスの数字キーボードを呼び出すことができます。d は無効です

Android 4.4 以下 (X5 カーネルを含む)、どちらも数字キーボードを呼び出します

Android 4.4.4 以降、type 属性のみ。つまり、上記のコードで type="number" を type="text" に変更すると、9 マスの数字キーボードの代わりにフル キーボードが表示されます。

一般的に使用される正規表現

パターンはすべて同じ方法で使用されます。ここでは詳細な記述方法については説明しません。一般的に使用される正規表現をいくつか列挙するだけです:

Credit Card [0-9]{13, 16}

UnionPay カード ^62[0-5]d{13,16}$

ビザ: ^4[0-9]{12}(?:[0-9]{3})?$

MasterCard: ^ 5[1-5][0-9]{14}$

QQ 番号: [1-9][0-9]{4,14}

携帯電話番号: ^(13[0-9 ]|14 [5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9] )d{ 8}$

ID カード: ^([0-9]){7,18}(x|X)?$

パスワード: ^[a-zA-Z]w{5,17}$文字で始まり、長さは 6 ～ 18 で、文字、数字、アンダースコアのみを含めることができます

強力なパスワード: ^(?=.d)(?=.[a-z])(?=.*[A-Z])。 {8,10 }$ には、大文字、小文字、数字の組み合わせが含まれます。特殊文字は使用できません。長さは 8 ～ 10 文字です

7 文字または 14 文字です: ^[u4e00-u9fa5]{1, 7}$|^[ dA-Za-z_]{1,14}$

残念ながら、パターンに対するブラウザのサポートは非​​常に貧弱です: Can I Use

を使用します。ただし、最初に述べたように数字キーボードを変更するだけであれば、この記事のiOS、Androidどちらでも問題ありません。

以上がHTML5のpattern属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。