Valid8によるJavaScript検証

多くの場合、JavaScriptを使用してインターフェイスを「飽和」させる必要があります。 私はほとんどjQueryを使用して作業しています。すべてが好きですが、1つの問題は検証です。 常に車輪を再発明し、コードスニペットをネットワークで検索する必要があります。 しかし、詳細には触れずに2、3行を書きたいと思います。 喜びはもうすぐではありませんでした。Valid8ライブラリ（validateと発音します）を見つけ、最終的に検証コードを書く問題を解決しました。

使い方

ライブラリの使用は非常に簡単であることが判明しました。これは、インターネットからjQueryの「スクラップ」を接着することについては言えません。 ライブラリを接続するには、 ここにアクセスして 、大切なダウンロードをクリックする必要があります。 jquery.valid8.jsファイルが特に重要なアーカイブがダウンロードされ、プロジェクトのjsファイルフォルダーにコピーし、ライブラリをhtmlに接続します。

<script src="/js/jquery-1.6.3.js" type="text/javascript" charset="utf-8"></script> <script src="/js/jquery.valid8.js" type="text/javascript" charset="utf-8"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォームがあるとしましょう：

 <form><ul> <li><input type="text" id="inputSome" /></li> </ul></form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

検証（デフォルトでは、必須入力のチェックのみ）を追加し、エラーメッセージ付きの文字列をパラメーターとして渡します。 jQueryスタイルで作業します。

 $('#inputSome').valid8("  !");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フィールドがフォーカスを受け取り、入力せずに終了すると、囲んでいるタグ（この場合はli ）はエラースタイルクラスを受け取ります 。

エラーを視覚化するには 、ドキュメントの先頭に CSSを追加します。

 <style> .error input { background:pink; } </style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

検証の準備ができました。 それだけです

機会はもっと興味深いです。

Valid8機能は充填チェックに限定されません。 真剣な仕事のために、正規表現を接続できます：

 $('#inputSome').valid8({ 'regularExpressions': [ { expression: /^.+$/, errormessage: '  !'}, { expression: /^[habr]+$/|>, errormessage: '     h, a, b, r'} ] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、両方の正規表現に一致する文字のみをフィールドに入力できます。 1つ目はフィールドを空のままにすることを禁止し、2つ目は4文字の入力に制限を追加します： habr 、 babr 、 habrahabr 、または式に一致する派生物を入力できます。

まあ、もちろん、Ajax

検証にサーバーを使用できます。

 $('#inputSome').valid8({ 'ajaxRequests': [ { url: '/ajax/validation/' } ] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、ライブラリは入力された値をチェックするためにサーバーと通信します（たとえば、登録済みログインについて警告するため）。 フィールドの値は、 valueパラメーターのPOSTを介してサーバーに渡されます。 サーバーはJSON形式で応答を返す必要があります。

 {"valid": true, "message": ",    !"}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

正規表現とサーバー検証を組み合わせることができます。 他の可能性があります：検証が​​発生するイベントの決定、検証間隔、js検証関数。

ソース

Valid8ライブラリ

JQueryライブラリ