jVForms.js-クロスブラウザーフォーム検証ポリフィル

これは何ですか

1. text | textareaのようなHTMLフォームを自動的に確認します。
2. フォームは「必須」および「パターン」属性に対してチェックされ、主にこれらの属性をサポートしないブラウザー向けに設計されています。
3. すぐに使用できる組み込みのテンプレートセット。
4. フォーム内とそれ以外の両方をクリックして、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



ご清聴ありがとうございました！



デモはこちら！