jQuery控えめな検証とは何ですか?


148

jQuery Validationプラグインとは何か知っています。jQuery Unobtrusive ValidationライブラリがMicrosoftによって作成され、ASP.NET MVCフレームワークに含まれていることを知っています。しかし、それが何であるかを説明する単一のオンライン情報源を見つけることができません。標準のjQuery検証ライブラリと「非破壊的」バージョンの違いは何ですか?


2
控えめな検証では、HTMLにdata-val -...属性が追加されるので、HTMLソースでも検証を読み取ることができます。
Preben Huybrechts 2012

3
私はあなたの質問への答えがここで説明されていると思います:bradwilson.typepad.com/blog/2010/10/…彼はUnobtrusiveがオンまたはオフの場合に何が起こるかの違いを説明しています。
トミー

回答:


123

Brad Wilsonは、控えめな検証控えめなajaxに関する素晴らしい記事をいくつか持っています。
また、このPluralsightビデオの「AJAXとJavaScript」のセクションでは、非常にうまく表示されています。

基本的に、それは単に汚染しないJavascriptの検証であるあなた自身の持つソースコードを検証コード。これはdata-、HTML の属性を利用して行われます。


控えめな検証のためにmvc3で行われた改善について教えてください。
wwcdwdcw 2013年

ビデオへのリンクが壊れています。
Misha Moroshko 2014年

それを指摘してくれてありがとう@MishaMoroshko。現時点では、Pluralsightで代替を見つけることができなかったため、リンクを削除しました。代理人が決まり次第、また編集します。
bertl 2014年

いくつかのコード例がいいでしょう。現状の返信はそれほど役に立ちません。記事へのリンクではなく、簡単な解決策やコードサンプルを探してここに来るほとんどの人は、時間の経過とともに壊れる可能性があります。コードサンプル。私は次の2つの答えを好む。
オーウェン

107

控えめな方法で:

  • validate()メソッドを呼び出す必要はありません。
  • データ属性を使用して要件を指定します(data-val、data-val-requiredなど)。

jquery検証の例

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

jquery検証控えめな例

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

4
ありがとう、私はCtrl-Fを押して、作業しなければならないコードでvaldiate()呼び出しを見つけようとしました。なぜ私はそれを見つけることができなかったのだろうと思っていました
bio595 14

2
ええ、「無邪気な」は、ここでは「発見できない」という言葉の冒涜のようです。
ReactingToAngularVues

18

明確にするために、jQuery Validation Unobtrusiveを使用したフォーム検証を示すより詳細な例を以下に示します。

どちらもjQueryで次のJavaScriptを使用します。

  $("#commentForm").validate({
    submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      alert("This is a valid form!");
//      form.submit();
    }
  });

2つのプラグインの主な違いは、各アプローチで使用される属性です。

jQuery検証

以下の属性を使用するだけです。

  • 必要に応じて必須に設定
  • 適切なフォーマット(メールなど)のタイプを設定します
  • サイズ(最小長など)などの他の属性を設定する

これがフォームです...

<form id="commentForm">
  <label for="form-name">Name (required, at least 2 characters)</label>
  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
  <input type="submit" value="Submit">
</form>

邪魔にならないjQuery検証

次のデータ属性が必要です。

  • data-msg-required = "これは必須です。"
  • data-rule-required = "true / false"

これがフォームです...

<form id="commentForm">
  <label for="form-x-name">Name (required, at least 2 characters)</label>
  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
  <input type="submit" value="Submit">
</form>

これらの例のいずれかに基づいて、必要なフォームフィールドが入力され、追加の属性基準を満たしている場合、すべてのフォームフィールドが検証されたことを通知するメッセージがポップアップ表示されます。それ以外の場合は、問題のあるフォームフィールドの近くにエラーを示すテキストが表示されます。

参照:-jQuery検証:https : //jqueryvalidation.org/documentation/


7

jQuery Validation Unobtrusive Nativeは、ASP.Net MVC HTMLヘルパー拡張機能のコレクションです。これらは、HTML 5データ属性によって駆動される検証のためのjQuery Validationのネイティブサポートを利用します。Microsoftは、jquery.validate.unobtrusive.jsをMVC 3とともに出荷しました。jQueryValidationとHTML 5データ属性の組み合わせを使用して、クライアント側にデータモデル検証を適用する方法を提供しました(これは「無作法」な部分です)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.