tFormer.js-HTMLフォームを強化

前書き：

フォームを作成する必要がありましたか？ クライアントでこれらのフォームを検証するスクリプトを作成する必要がありますか？ フォームの検証に既存のプラグイン/アドオンを使用したことがありますか？

私はそうしなければなりませんでしたが、問題を真正面から解決するアプローチ（フォームの下の各プロジェクトの検証スクリプト）または既存のサードパーティプラグインの動作方法に100％満足していませんでした。

問題：

独自のスクリプトとプラグインの主な問題は常に、柔軟性、利便性、シンプルさです。

（Parsley.jsのように）スクリプトの構成に必要な多数のデータ属性により、コードが読みにくくなり、それらがすべてどのように記述されているか思い出せなくなります。 だけでなく...

すべてのプラグインが目的のHTMLフォームに適合しているわけではありません。また、さまざまなフォーム用に独自のスクリプトを常に作成することは、必ずしも便利で合理的ではありません。

チャレンジ：

直感的な構文と検証により、柔軟で便利にカスタマイズ可能な、完全に制御可能なものを作成します。

解決策：

ソリューションは、 tFormer.jsと呼ばれる小さなオープンソースプラグインをもたらしました。

主な機能と機能：

• 独立性-jQueryは必要ありません （最近では珍しい）。
• 検証ルールの大きなリスト。
• すべての検証ルールは短く直感的です-覚えやすく使いやすいです。
• 1つのデータ属性のみ、または新しいtFormerオブジェクトを初期化するときにオプションを使用して、ルールを組み合わせて設定します。
• 値自体の検証を実行する別のオブジェクトは、メインプラグインの外部で、または追加の複雑な検証に使用できます。
• 「カスタム」独自の（）検証関数-特定のフィールドの複雑な検証用に開発者が作成できます。
• 「オンザフライ」でバリデータのルールと設定を変更する（setRules（）およびset（）メソッド）;
• 送信イベントの制御と視覚的な送信ボタンの送信。
• 検証をチェックするためのボタン（チェックボタン）;
• 変数検証イベント（デフォルトでは、検証のイベントは「入力」および「キーアップ」です）;
• タイムアウト検証の遅延。
• 処理条件;
• すべてのフィールドと各フィールドに固有の両方のオプションを設定する機能。
• 検証後に起動するonerrorおよびonvalid関数。
• 検証前に毎回関数が実行される前。
• AJAX応答に対する厳密な規制のないAJAX検証（最終（結果）関数では、開発者は応答を処理してtrueまたはfalseを返す必要があります）。
• エラー、処理、および無効なクラスの変更。
• ...など。

インストールと使用：

1. ダウンロード;
2. 目的のページでスクリプトを接続します。
3. 目的のオプションで新しいtFormerオブジェクトを定義します。

HTMLフォームの例：

<form id="my_form_id"> <input type="text" name="zip" data-rules="a1 l=5" /> <input type="text" name="email" data-rules="* @" /> <input type="submit" value="Submit" /> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

tFormerの最小定義の例：

 var my_form_id = new tFormer('my_form_id');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

変更を加えてtFormerを決定する例：

 var my_form_id = new tFormer('my_form_id', { errorClass: 'my_own_errorClass', //    ,     timeout: 666, //   disabledClass: 'i_am_disabled', onerror: function(){ //    console.log('The field with name `' + this.name + '` is not valid'); }, //   …. fields: { //       email: { timeout: 500 //     email } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

検証ルールの要約表：

ルール	説明
*	必須フィールド（値は空にできません）
@ 、 @ @s 、 ip 、 base64 、 url	電子メール、コンマ区切りの電子メール、IPアドレス、Base64文字列、URL（それぞれ）
< 、 > 、 >= 、 <=	フィールド値を数値と比較します。 （例 " >=10 "-フィールド値は10以上でなければなりません）
l= 、 l< 、 l> 、 l>= 、 l<=	フィールド値の文字数の比較（例 " l=5 "-値は5文字で構成される必要があります）
= 、 =#	特定の値（ ' =10 '、 ' =some_value '）または指定されたid（ ' =#some_id '）を持つフィールドの値との=#some_id
!= !	等しくない、または含まない（ ' !=some_value '-'some_value'と等しくない、 ' !.com '-' !.com com'を含まない）
c 、 cv 、 cm 、 ca 、 cd	クレジットカードの検証（すべてのタイプ、ビザ、マスターカード、AMEX、ディスカバー）
D=	日付形式への準拠の比較（たとえば、「 D=YMD 」-年月日への準拠のチェック）

コードの断片：

オプションと検証ルールを変更する例：

 my_form_id.set({timeout: 555}); //     my_form_id.setRules(' ', 'email'); //     -  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

検証用の別のオブジェクト （メインプラグインで使用され、それとは別に使用できます）：

 _v_('some value').validateWithRules('* l>5'); // => true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

複合型のフィールドを検証するためのカスタム関数 （必要に応じて開発者が作成）::

 var my_form = tFormer('my_form_id', { fields: { field_name: { own: function(){ var my_value = this.value; var is_ip = _v_(my_value).validateWithRules('* ip'); var is_email = _v_(my_value).validateWithRules('* @'); var is_url = _v_(my_value).validateWithRules('* url'); return (is_ip || is_email || is_url); } } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォームの状態を監視する方法 ：

 //  /    my_form.submitButtonControl( true ); //  - submitButtonOn() my_form.submitButtonControl( false ); //  - submitButtonOff() //  /       my_form.processing( true ); //  - processingOn() my_form.processing( false ); //  - processingOff() //       my_form.lock(); my_form.unlock(); //      unlock()      lock()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインのステータス：

プラグインはバージョン0.3を超えており、現在ベータ版です。

ブラウザの新しいバージョンやIE8でも動作します（混乱する必要がありました）。

githubに横たわり、可能な限り時間をかけて、すべての関心のある開発者からの追加のアイデアとコミットを待ちます:)

リンク集

• メイン（完全な）ドキュメント-http://tFormerjs.com
• Githubリポジトリ-https ://github.com/TjRus/tFormer.js