jQuery 水印输入和验证

Question

在 HTML 页面上，我有一个输入框，当它为空时，上面有一个“水印”。 （例如：“在此处输入文字...”）。 有点像这样： http://digitalbush.com/projects/watermark-input-plugin/ - 但自定义编写。

问题是我不知道如何使用 jQuery 验证插件 (http: //docs.jquery.com/Plugins/Validation/），以便它将我的水印文本视为字段为空。

我在 jQuery 验证器中找不到一个选项来让我指定字段何时有效的自定义规则，有吗？ 我可以找到允许我指定字段是否需要基于自定义逻辑进行验证的选项，但不能指定如何验证它。

我缺少什么？

Answer 1

感谢 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
            }
         },

Answer 2

我正在使用 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.");

Answer 3

不确定验证插件如何工作，但这是一个可用的单独模块。

   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 "";
   }

Answer 4

查看此博客文章：

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

告诉您如何为字段构建自定义验证规则。

Answer 5

当为每个测试框使用唯一的水印标签时（例如“输入名字”、“输入姓氏”...），您可以将脚本改进为：

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

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

这还会从脚本中删除硬编码文本。