166

jQuery検証プラグインが何であるかを知っています。jQuery Unobtrusive ValidationライブラリがMicrosoftによって作成され、ASP.NETMVCフレームワークに含まれていることを知っています。しかし、それが何であるかを説明する単一のオンラインソースを見つけることができません。標準のjQuery検証ライブラリと「目立たない」バージョンの違いは何ですか？

4

4 に答える 4

142

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

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

于 2012-07-18T06:00:21.197 に答える
115

目立たない方法で：

  • 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>
于 2013-12-03T21:35:46.563 に答える
23

明確にするために、jQueryValidationUnobtrusiveを使用したフォーム検証を示すより詳細な例を次に示します。

どちらも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/

于 2016-11-22T02:01:55.747 に答える
7

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

于 2016-05-04T07:15:00.660 に答える