キーテイクアウト

カスタムJavaScript入力は、アクセシビリティを複雑にし、ネイティブブラウザ関數(shù)と競(jìng)合する可能性があるため、可能な場(chǎng)合は避ける必要があります。
• CSSは、検証狀態(tài)に基づいて入力フィールドをスタイリングするために使用できます。
HTML5の制約検証APIは、2つのフィールドや非同期チェックの比較、フォーム機(jī)能とユーザーの相互作用の強(qiáng)化など、HTMLだけが処理できないカスタム検証シナリオを有効にします。
制約検証とは？
すべてのフォームフィールドには目的があります。そして、この目的は、多くの場(chǎng)合、禁忌によって支配されます。または、各フォームフィールドに入力すべきではないものを管理する規(guī)則です。たとえば、電子メールフィールドには有効な電子メールアドレスが必要です。パスワードフィールドには、特定の種類(lèi)の文字が必要になり、必要な數(shù)の文字が最小限に抑えられる場(chǎng)合があります。テキストフィールドには、入力できる文字の數(shù)に制限がある場(chǎng)合があります。
• 最新のブラウザは、これらの制約がユーザーによって観察されていることを確認(rèn)する機(jī)能を備えており、それらのルールが侵害されたときに警告することができます。これは、contstraint検証として知られています。
• クライアント側(cè)vsサーバー側(cè)の検証
• 言語(yǔ)の初期に書(shū)かれたJavaScriptコードの大部分は、クライアント側(cè)のフォーム検証を処理しました。今日でも、開(kāi)発者はフィールド値を確認(rèn)するために関數(shù)を書(shū)くのにかなりの時(shí)間を費(fèi)やしています。
これは現(xiàn)代のブラウザでまだ必要ですか？おそらく

しかし、最初に、ここに大きな警告メッセージがあります：

html5入力フィールド

htmlオファー：

マルチラインテキストボックスの
オプションのドロップダウンリストの
• for…ボタン

ただし、を使用します

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

その他の便利な屬性には以下が含まれます

屬性

• 出力：計(jì)算またはユーザーアクションのテキスト結(jié)果
• 進(jìn)捗狀況：値と最大屬性を備えた進(jìn)捗バー
• メーター：値、min、max、low、high、および最適な屬性に設(shè)定された値に応じて、グリーン、アンバー、および赤の間を変えることができるスケール。

入力ラベル

フィールドには、関連するが必要です。これは要素を包み込むことができます：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

または屬性を使用して、フィールドのIDをラベルにリンクします：

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

ラベルはアクセシビリティにとって重要です。プレースホルダーを使用して畫(huà)面スペースを節(jié)約するフォームに遭遇した可能性があります：

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

ユーザーが何かを入力すると、プレースホルダーテキストは消えます - 単一のスペースでさえも。ユーザーがフィールドが望んでいたものを強(qiáng)制的に覚えているよりも、ラベルを表示する方が良いです！

入力動(dòng)作

フィールドタイプと制約屬性は、ブラウザの入力動(dòng)作を変更します。たとえば、數(shù)値入力には、モバイルデバイスの數(shù)値キーボードが表示されます。フィールドには、スピナーとキーボードのアップ/ダウンカーソルプレスが表示される場(chǎng)合があります。

正しいフィールドタイプとAutoCorRectを使用すると、JavaScriptで達(dá)成するのが難しい利點(diǎn)が提供されます。たとえば、一部のモバイルブラウザーは

sms
• によって送信された1回限りのコードをインポートします
• 自動(dòng)検証

空の値を送信しようとすると、フォームの提出が防止され、次のメッセージがChromeに表示されます。

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

JavaScriptの単一行なし ：

カスタムJavaScript入力の作成
新しいJavaScriptベースの日付エントリコンポーネントを書(shū)いている場(chǎng)合は、キーボードから立ち寄って離れてください！

カスタム入力コントロールを書(shū)くことは困難です。マウス、キーボード、タッチ、音聲、アクセシビリティ、畫(huà)面寸法、およびJavaScriptが失敗したときに何が起こるかを考慮する必要があります。また、別のユーザーエクスペリエンスを作成しています。おそらく、あなたのコントロールは、デスクトップ、iOS、およびAndroidの標(biāo)準(zhǔn)日付ピッカーよりも優(yōu)れていますが、なじみのないUIは一部のユーザーを混亂させます。

開(kāi)発者がJavaScriptベースの入力を作成することを選択する主な理由は3つあります。

1。標(biāo)準(zhǔn)的なコントロールをスタイリングするのは困難です

CSSスタイリングは限られており、多くの場(chǎng)合、ラベルの::前の:: :: :: fohindの後の入力をオーバーレイするなど、ハッキングが必要です。狀況は改善されていますが、機(jī)能よりもフォームに優(yōu)先順位を付けるデザインに疑問(wèn)を投げかけています。

2。最新のタイプは、古いブラウザではサポートされていません

本質(zhì)的に、インターネットエクスプローラーをコーディングしています。 IEユーザーはデートピッカーを取得しませんが、Yyyy-MM-DD形式で日付を入力できます。クライアントが主張する場(chǎng)合は、IEのみでポリフィルをロードします。最新のブラウザに負(fù)擔(dān)をかける必要はありません

3。以前に実裝されたことのない新しい入力タイプが必要です
これらの狀況はまれですが、常に適切なHTML5フィールドから始めます。彼らは速く、スクリプトがロードされる前でさえ動(dòng)作します。必要に応じてフィールドを徐々に強(qiáng)化できます。たとえば、JavaScriptを散布することで、カレンダーイベントの終了日が開(kāi)始日以降に発生するようにします。 要約： CSS検証スタイリング

次の擬似クラスを適用してフィールドを入力して、現(xiàn)在の狀態(tài)に応じてスタイルを整えることができます。

selector

説明 ：集中 フォーカスのフィールド ：フォーカスウィチン 要素にはフォーカスのあるフィールドが含まれています（はい、それは親セレクターです?。? ：フォーカス可視 キーボードナビゲーションのために要素がフォーカスを持っているので、フォーカスリングまたはより明白なスタイリングが必要です ：必須 必要な屬性を持つフィールド ：オプション 必要な屬性のないフィールド ：有効 検証に合格したフィールド ：無(wú)効 検証に合格していないフィールド ：user-valid ユーザーが対話(huà)した後に検証に合格したフィールド（Firefoxのみ） ：user-invalid ユーザーが対話(huà)した後に検証に合格していないフィールド（Firefoxのみ） ：範(fàn)囲內(nèi) 値は、數(shù)または範(fàn)囲の入力の範(fàn)囲內(nèi)です ：範(fàn)囲外 値は、數(shù)または範(fàn)囲の入力の範(fàn)囲外です ：無(wú)効 無(wú)効な屬性を持つフィールド ：有効にします 無(wú)効な屬性のないフィールド ：読み取り専用 読み取り専用屬性を持つフィールド ：read-write： 読み取り専用屬性のないフィールド ：チェック チェックされたチェックボックスまたはラジオボタン ：不定 すべてのラジオボタンがチェックされていないときなど、不確定なチェックボックスまたはラジオ狀態(tài) ：デフォルト デフォルトの送信ボタンまたは畫(huà)像

::プレースホルダー擬似要素で入力のプレースホルダーテキストをスタイリングできます：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

上記のセレクターは同じ特異性を持っているため、順序が重要になる可能性があります。この例を考えてみましょう：

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

無(wú)効な入力には赤いテキストがありますが、無(wú)効な屬性を持つ入力にのみ適用されます。 ブラウザは、ページの読み込みに検証スタイルを適用します。たとえば、次のコードでは、すべての無(wú)効なフィールドに赤い境界線(xiàn)が與えられます。

ユーザーは、フォームと対話(huà)する前に、困難な赤いボックスのセットに直面します。最初の送信後または値が変更された後に検証エラーを表示すると、より良い體験が得られます。そこで、JavaScriptが介入します…
javaScriptおよび制約検証API

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

制約検証APIは、標(biāo)準(zhǔn)のHTMLフィールドチェックを強(qiáng)化できるフォームカスタマイズオプションを提供します。できます：

ユーザーがフィールドと対話(huà)するか、フォームを提出するまで、

検証を停止します
カスタムスタイリングを使用したエラーメッセージを表示
• HTMLだけでは不可能なカスタム検証を提供します。これは、2つの入力を比較する必要がある場(chǎng)合に必要です。たとえば、電子メールアドレスや電話(huà)番號(hào)を入力した場(chǎng)合、「新しい」と「確認(rèn)」パスワードフィールドが同じ?jìng)帳虼_認(rèn)するか、次々と日付が來(lái)ることを確認(rèn)します。 >
• フォーム検証
• APIを使用する前に、フォームのNovalidateプロパティをtrueに設(shè)定して、コードをデフォルトの検証とエラーメッセージを無(wú)効にする必要があります（Novalidate屬性を追加するのと同じ）：

イベントハンドラーを追加できます。これは、フォームが提出されたときなどです。

ハンドラーは、すべてのフォームの入力が有効である場(chǎng)合にtrueを返すCheckAlivity（）またはReportAlidivity（）メソッドを使用してフォーム全體を有効にすることができます。 （違いは、CheckVality（）が入力が制約検証の対象かどうかをチェックすることです。）

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Mozilla docs説明：

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

無(wú)効なイベントもすべての無(wú)効なフィールドでトリガーされます。これはバブルではありません：ハンドラーは、それを使用するすべてのコントロールに追加する必要があります。

有効なフォームには、さらに検証チェックが発生する可能性があります。同様に、無(wú)効なフォームに無(wú)効なフィールドが強(qiáng)調(diào)表示される可能性があります

フィールド検証

個(gè)々のフィールドには、次の制約検証プロパティがあります

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

willvalidate：要素が制約検証の候補(bǔ)である場(chǎng)合、trueを返します。
validationmessage：検証メッセージ。フィールドが有効な場(chǎng)合、これは空の文字列になります。
valitity：有効設(shè)定オブジェクト。これには、フィールドが有効な場(chǎng)合に有効なプロパティセットが真実です。それが間違っている場(chǎng)合、次のプロパティの1つ以上が真実になります：

culidityState 説明 .badinput ブラウザは入力を理解できません .Customerror カスタム妥當(dāng)性メッセージが設(shè)定されています .patternmismatch 値は、指定されたパターン屬性と一致しません .RangeOverFlow 値は最大屬性よりも大きい .RangeUnderFlow 値はMIN屬性よりも少ない .StepMismatch 値は、ステップ屬性ルールに適合しません .toolong 文字列の長(zhǎng)さは、最大屬性よりも大きくなります .tooshort 文字列の長(zhǎng)さは、minlength屬性よりも小さくなります .typemismatch 値は有効な電子メールやURLではありません .ValueEmissing 必要な値は空です

個(gè)々のフィールドには、次の制約検証方法があります

setCustomValidity（メッセージ）：無(wú)効なフィールドにエラーメッセージを設(shè)定します。フィールドが有効である場(chǎng)合、またはフィールドが永久に無(wú)効なままになる場(chǎng)合、空の文字列を渡す必要があります。
• checkalivity（）：入力が有効な場(chǎng)合にtrueを返します。 Valitity.Validプロパティは同じことを行いますが、CheckValidity（）は、フィールド上の無(wú)効なイベントもトリガーします。
• validateForm（）ハンドラー関數(shù)はすべてのフィールドをループし、必要に応じてその親要素に無(wú)効なクラスを適用することができます。

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

以上がHTMLフォームと制約検証の完全なガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。