これは何ですか
- text | textareaのようなHTMLフォームを自動的に確認します。
- フォームは「必須」および「パターン」属性に対してチェックされ、主にこれらの属性をサポートしないブラウザー向けに設計されています。
- すぐに使用できる組み込みのテンプレートセット。
- フォーム内とそれ以外の両方をクリックして、HTML要素にフォーム送信ハンドラーをインストールする機能。
まあ、なぜ？
残念ながら、すべてのブラウザが
requiredや
patternなどの標準属性をサポートできるわけではありません。残念なことに、誰もがブラウザを最新バージョンに更新するとは限りません。
| インターネットエクスプローラー | クロム | オペラ | サファリ | Firefox | Android | iOS |
| 必要な | 10.0 | 5.0+ | 9.6+ | x | 4.0+ | 2.3+ | 3.0+ |
| 模様 | 10.0 | 5.0+ | 9.6+ | x | 4.0+ | 2.3+ | 3.0+ |
はい、そうです！ どうする？
有能なjVForms.js
polyphileを使用できます。これは、多くのスペースを占有せず、設定を必要とせず（たまにのみ）、フォームをチェックするための汚い作業をすべて行います。
そしてどうやって？
ドキュメントの最後の「body」タグを閉じる前にjVForms.min.jsを含めて、初期化します。
<script src="jVForms.min.js"></script> <script> jVForms.initialize(); </script>
それから？
フォームフィールドに属性 `required =" required "を追加し、要素を必須にします。
<input type="text" name="field_1" value="" required="required"/>
HTMLの必須属性属性 `pattern =" RegExp "`を追加します。ここで、 `RegExp`はフォームを検証するための正規表現です。
<input type="text" name="field_1" value="" required="required" pattern="^\d+$"/>
HTMLパターン属性正規表現とは何ですか？
正規表現の追加が困難な場合は、クラスで宣言するだけで既製のテンプレートセットを使用できます。
<input type="text" name="field_1" value="" class=""/>
テンプレートリスト：
- vf-all：区切り文字ではない任意の文字
- vf-numInt：整数
- vf-numFloat： 10進数
- vf-notNum：数字ではありません
- vf-index：インデックス
- vf-wordUpper： RuまたはUSの大文字の単語と記号（-）
- vf-wordLower：小文字のRuまたはUSの単語と記号（-）
- vf-wordRuUpper：大文字のRuの単語と記号（-）
- vf-wordRuLower： Ruの小文字の単語と記号（-）
- vf-wordUSUpper：大文字の米国語とマイナス記号（-）
- vf-wordUSLower：米国の小文字の単語とダッシュ （-）
- vf-stringRu：米国文字を含まない文字列
- vf-stringUS： Ru文字を含まない文字列
- vf-timeHM：形式の時間：分
- vf-dateDMY：日/月/年形式の日付
- vf-dataDMYus：月/日/年の形式の日付
- vf-cc： 9999 9999 9999 9999の形式のクレジットカード
- vf-phone： 999 99 99または9999999または999-99-99または999-99 99の形式の番号
- vf-phoneDash： （999）999-9999または（999）999 9999形式の数値
- vf-phoneAlong：形式の数字（999）9999999
テンプレートはいくつでも宣言できますが、最初のテンプレートのみが機能します。
<input type="text" name="field_1" value="" class="vf-numInt vf-wordUSLower vf-dataDMYus otherClass"/>
パターン属性とパターンクラスを宣言する場合、パターンクラスは機能しません。
<input type="text" name="field_1" value="" required="required" pattern="^\d+$" class="vf-numInt"/>
属性 `required =" required "が省略され、テンプレートクラスまたは属性` pattern`が追加される場合、このフィールドは必須ではありません。
ただし、まだ入力されている場合はチェックされます。
<input type="text" name="field_1" value="" class="vf-numInt"/>
送信は私に合わない！
フォーム内の他の要素にハンドラーをインストールするには、
vf-submitクラスを追加する必要があります。
<form> <input type="text" required="required" name="name" class="vf-numInt"/> <input type="text" name="phone"/> <textarea name="area"></textarea> <span class="vf-submit"></span> </form>
フォーム外のその他の要素にハンドラーをインストールするには、
vf-submitクラスを追加し、この要素をフォームに関連付ける必要があります。
これを行うには、フォームで
id属性または
name属性を指定し、この属性の値をクラスとして要素ハンドラーに割り当てる必要があります。
<form id="formId"> <input type="text" required="required" name="name" class="vf-numInt"/> <input type="text" name="phone"/> <textarea name="area"></textarea> </form> <span class="vf-submit formId" ></span>
間違いだけが欲しい。
jVFormsは、フォームの検証時に通知のタイプを変更できます。これには3つの値が割り当てられます。
- オフ：通知を無効にします。
- すべて：正しいフィールドと誤ったフィールドを強調表示します。
- エラー：無効なフィールドのみを強調表示します。
デフォルト値は「すべて」です。 たとえば、この値を「オフ」に変更するには、初期化関数に次を渡す必要があります。
<script> jVForms.initialize({ notice: 'Off' }); </script>
そして、結果は何ですか？
その結果、石鹸のように単純な小さな多相性物質が得られました。 現在、最新のブラウザーには自動フィールド強調表示が組み込まれているため、
jVForms.jsを使用する場合、競合や視覚的な拒否はありません。
Git： jVForms.jsご清聴ありがとうございました！
デモは
こちら！