このトピックでは、Webフォームを検証するための便利で簡単で強力なjQueryプラグインについて説明します。同時に、完全に冗長です。 作成の詳細とアナログ（より正確には、アナログ）との比較に興味がない場合は、トピックの最後を参照してください。例とソースコードへのリンクがあります。
しばらく前、クライアント側のリソースを変更する必要がありました。これには、膨大な量のアンケートフォームが含まれていました。 これらのフォームの不快な機能の1つは、ひどい量の異種入力検証ルールと、フィールド間のさらに多くの関係でした。
例：チェックボックスAが選択されている場合、フィールドXには数字のみを入力でき、フィールドYは非表示にする必要がありますが、ラジオボタンZをさらに選択した場合は、フィールドYを表示し、数字以外のすべてをフィールドXに入力できます
言い換えれば、マーケティング担当者の不健康な意識から生まれた生き地獄。
入力フィールドのコンテンツを検証する方法はかなりありますが（標準ブラウザのものまで...残念ながら、クロスブラウザのものではありません）、 いくつかのフィールド間の複雑な関係を確立できる適切なクライアントソリューションは1つだけでした-元々使用されていたZFormsフレームワークリソース上。 おそらく、彼がどのように知っていたという事実に基づいて、彼のプラスが終了し、そして固体のマイナスが始まりました：
-onclick（！）ハンドラーで検証ルールを設定するための不明瞭で不便な方法。 XMLのような挿入を介してページコードに直接これらのルールを定義する文書化されていない方法がまだありますが、これはさらに恐ろしいです。
-フレームワークはDOMツリーを変更しますが、その構造には特別な条件が必要です。 たとえば、検証中に変更されたプロパティは、フィールドではなく、2番目（!!）の先祖に適用されます。これは、レイアウト時に考慮する必要がありました。
-検証されたコントロールは、実際には、フレームワークウィジェットに置き換えられます（これが必要でない場合でも）。 ほとんどの場合、これはフィールドで作業する他の手段を使用できないことを意味します。 ZFormsとjQuery UIを交差させることでどれほどの悪が生まれたかを言葉で説明しないでください...
-仕事の嫌なイベントモデル。 ZFormsは、独自のウィジェットのイベントでのみ機能します。また、それらにのみサブスクライブできます。 タイマーの検証チェックを停止する必要がありました。
-フレームワークの最小化されたコードに入るか、このコードを自分で握って修正する必要があったバグの束（通常どおり、既に生産中に出ています）。
そして、最終的に、2009年にはZFormsの最新バージョンがすでにリリースされており、そのjQueryバージョンはライブラリの最新バージョンとはまったく動作しませんでした。
一般に、袖をまくり上げて最初から問題を解決する必要がある場合が明らかにありました。 jquery.lemongrabを作成してこれを行いました。
レモングラブの主なアイデアは次のとおりです。
-プラグインは、そうではないものになろうとしていません。 彼は1つのタスクを実行しますが、それはうまくいきます。
-プラグインはHTML5の機能を使用しますが、古いブラウザーでは機能します。
-検証は、特定の場合に可能な限り便利に設定されます。
-プラグインは他のハンドラーと競合しません。
このプラグインは、デスクトップでもモバイルでも、最新ではないブラウザーでテストされています。 その結果、使用するjQueryのバージョンにすべて依存します。問題（簡単に解決できますが）はバージョン9のIEでのみ発生しました。
レモングラブは何ができますか？
-プラグインは、入力フィールドのステータスを確認し、指定されたルールに応じて、要素の状態（同じまたは他の要素）を変更できます。 変数の状態：有効性、バインディング、アクセシビリティ、可視性。
アクセシビリティと可視性がすべて明確な場合（これは、それぞれ、有効な属性と表示のcssプロパティです）、有効性と必須性は説明する価値があります。 それと別の両方が同じZFormsで覗かれています。 実際、これらの属性は、フィールドが有効/無効であり、入力する必要がある場合にフィールドに追加されるクラスです（この場合、必要なHTML5属性も追加されます）。 プラグインは、このような属性を持つフィールドがあるフォームを送信することを許可しません（ただし、これはカスタマイズ可能です）。
-プラグインには、シンプルで明白なイベントモデルがあります。 イベントが発生しました。たとえば、いくつかの要素が有効になりました-そのためにlemongrab.validイベントが生成されます。 有効でなくなった-lemongrab.novalidが生成されました。
-ルールはJSONで設定されます。これは、検証済み要素のデータ属性に直接書き込むか、プラグインの初期化時にロードできます。 前者は、ページコードでルールを直接設定するのに便利です。後者は、ルールを別のファイルに転送するときに便利です（ちなみに、ZFormsは方法がわかりません）。
-検証には、単純なプロパティ（チェックボックスのチェック/チェック解除など）、正規表現、フィールドの状態セット、およびjQueryセレクターを使用できます。 これで十分でない場合は、ユーザー定義関数を使用してステータスを確認できます。
-要素のルールの数に制限はなく、好きなように組み合わせることができます。 プラグインは、ルールを結合するロジックを設定できます（および/または/しない）。より複雑なオプションについては、すべて同じユーザー定義関数があります。
-プラグインには、ドキュメントに記載されているあらゆる種類の小さな追加の特典があります。
どのように見えますか？
いくつかの実例：
内容が正規表現と一致する場合、フィールドは有効になります（ACCEPTABLEクラスが追加されます）。
<form id="sample"> <input type="text" data-rule-valid='[{"key":"regexp","value":"^.{1,5}$"}]' /></code> <script>$("#sample").lemongrab();</script> </form>
2番目のラジオボタンが選択されている場合、フィールド＃id2は入力に使用できます。
<form id="sample"> <fieldset id="selectbox"> <input type="radio" name="test" value="1" id="1" /> <input type="radio" name="test" value="2" id="2" /> <input type="radio" name="test" value="3" id="3" /> <input type="radio" name="test" value="4" id="4" /> </fieldset> <input type="text" data-rule-enabled='[{"key":"c", "selector":"#3"}]' /> <script>$("#sample1").lemongrab();</script> </form>
ドキュメントとインタラクティブな例 。
私がこのことを書いてから、私の人生は魅力的で愛情のあるものになりました。それもあなたに願っています。そのため、パブリックドメインにコードを投稿します。