5

HTMLページには、空のときに「透かし」が付いた入力ボックスがあります。(例:「ここにテキストを入力してください...」)。このようなもの:http://digitalbush.com/projects/watermark-input-plugin/-しかしカスタム作成。

問題は、jQuery検証プラグイン( http://docs.jquery.com/Plugins/Validation/ )を使用してこのフィールドを検証する方法がわからないため、透かしテキストがフィールドが空であるかのように扱われることです。

jQueryバリデーターに、フィールドが有効な場合のカスタムルールを指定するオプションが見つかりません。ありますか?カスタムロジックに基づいてフィールドを検証する必要があるかどうかを指定できるオプションを見つけることができましたが、検証方法は指定できませんでした。

私は何が欠けていますか?

4

5 に答える 5

6

リンクを提供してくれたKazarのおかげで、私は次の解決策を思いつきました(誰かが興味を持っている場合):

    function notWatermark(value, element){
        return value != 'enter text...';
    }

    $.validator.addMethod("notWatermark", notWatermark, "Field cannot be empty.");

    $('#SearchForm').validate({
        rules: {
            SomeField: {
                required: true,
                notWatermark: true
            }
         },
于 2009-06-04T11:03:50.180 に答える
5

jQueryにWatermarkプラグインを使用していますが、状況は似ていました。

http://code.google.com/p/jquery-watermark/

透かしの表示にクラス名を使用します。(DigitalBrushバージョンがクラスを使用するかどうかはわかりません。)jQueryのhasClass()関数を使用して、現在割り当てられているクラスに基づいてフィールドが「空」と評価されるかどうかを判断するように、上記の関数を変更しました。

function notWatermark(value, element){
 return !$(element).hasClass("waterMarkClass");
}
$.validator.addMethod("notWatermark", notWatermark, "Required.");
于 2010-11-24T01:41:53.570 に答える
3

このブログ投稿をチェックしてください:

http://randomactsofcoding.blogspot.com/2008/10/starting-with-jquery-how-to-write.html

フィールドのカスタム検証ルールを作成する方法を説明します。

于 2009-06-04T10:54:41.790 に答える
1

テストボックスごとに一意の透かしラベルを使用する場合(たとえば、「名を入力」、「名前を入力」...)、スクリプトを次のように改善できます。

function noWatermark(value, element) {
        return value.toLowerCase() != element.defaultValue.toLowerCase();
    }

$.validator.addMethod("noWatermark", noWatermark, "required.");

これにより、ハードコードされたテキストもスクリプトから削除されます。

于 2010-09-29T10:13:11.177 に答える
0

検証プラグインがどのように機能するかはわかりませんが、これは使用可能な別のモジュールです。

   var SetWatermark = function( oElemToWatermark, sWatermark )
   {
      var CheckFocus = function(oEvent)
      {
         var oElem = $(this);

         if ( oElem.val() == oElem.data("Watermark") )
            oElem.val("").css("color", "");
      }

      var CheckBlur = function(oEvent)
      {
         var oElem = $(this);

         if ( oElem.val().length == 0 )
            oElem.val( oElem.data("Watermark") ).css("color", "Grey");
      }

      // HTML5 (simple route)
      if ( oElemToWatermark[0].placeholder != undefined )
         oElemToWatermark[0].placeholder = sWatermark;

      // pre HTML5 (manual route)
      else if (oElemToWatermark.data("Watermark") == undefined)
         oElemToWatermark  .data("Watermark", sWatermark)
                           .val(sWatermark)
                           .on("focus", CheckFocus )
                           .on("blur",  CheckBlur  );
   }

   var GetWatermarkText = function(oElem)
   {
      if (oElem[0].plaeholder != undefined)
         return oElem[0].placeholder;
      else if ( oElem.data("Watermark") != undefined )
         return oElem.data("Watermark");
      else
      { 
         alert("The element " + oElem[0].id + " does not have a Watermark value.");
         return "";
      }
   }

   var GetWatermarkValue = function(oElem)
   {
      var sVal       = oElem.val();
      var sWatermark = oElem.data("Watermark");

      if (oElem[0].placeholder   != undefined 
      ||  sWatermark             == undefined 
      ||  sWatermark             != sVal)
         return sVal;
      else if (sVal == sWatermark)
         return "";
   }
于 2013-05-09T22:09:00.527 に答える