VueでのHappier HTML5フォーム検証

input:invalid {}スタイルは、フォーム要素が無効である場合に役立ちますが、ユーザーエクスペリエンスは直接使用すると低くなります。たとえば、フォームがロードされるとすぐに無効なスタイルが表示され、ユーザーを混乱させます。したがって、この使用法は実際のアプリケーションではまれです。ただし、この問題が回避された場合、 :invalidセレクターは、大規模なライブラリに依存せずにフォーム検証に大きな役割を果たすことができます。

デイブは、2017年の元のアイデアに基づいて改善を提案しました。

 <code>form.errors :invalid { outline: 2px solid red; }</code>

ネイティブエラースタイルは、フォームがエラー状態にあり、 errorsクラスが追加されていることを確認した後にのみ適用されます。テストも簡単です。たとえば、[送信]ボタンをクリックすると、このクラスを適用できます。

 <code>submitButton.addEventListener("click", (e) => { form.classList.toggle("errors", !form.checkValidity()) });</code>

また、入力ボックスがフォーカスを失ったり、他の時間にも適用することもできます。各入力ボックスをラッパーにラップし、必要に応じてラッパークラスを切り替えることもできます。

デイブはこのアイデアをvueに適用します。

ユーザーがフォームを提出する前に間違ったスタイルを表示したくないため、フォームコンポーネントを初期化するときにerrorsをfalseに設定します。 invalidateForm関数は、 this.error trueに設定するだけです。これはCSS :invalid擬似クラス、緊急です。 invalidイベントを聞くことで、スタイルの適用を最初のフォームの提出試行の後まで遅らせることができますが、フォームにエラーがあることがわかります。

このアプローチでは、HTMLフォーム検証のネイティブ機能を最大限に活用する追加のライブラリを必要としません。次のリンクは、エラーメッセージも表示される改良バージョンです。

直接リンク→

以上がVueでのHappier HTML5フォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。