jQuery水印輸入和驗證

在HTML頁面上，我有一個輸入框，當它爲空時，它上面有一個「水印」。（例如：「在此輸入文字...」）。有點像這樣：http://digitalbush.com/projects/watermark-input-plugin/ - 但自定義書面。jQuery水印輸入和驗證

問題是，我無法弄清楚如何使用jQuery驗證插件（http://docs.jquery.com/Plugins/Validation/）驗證此字段，以便它將我的水印文本視爲該字段爲空。

我無法在jQuery驗證程序中找到一個選項，讓我指定一個字段有效時的自定義規則，是否有一個？我可以找到允許我指定是否需要基於自定義邏輯進行驗證的選項，但不能驗證應該如何進行驗證。

我錯過了什麼？

來源

2009-06-04 andreialecu

可能的重複[如何使HTML文本框顯示提示時爲空？]（http://stackoverflow.com/questions/108207/how-do-i-make-an-html- text-box-show-a-hint-when-empty） – 2016-06-21 12:48:55

看看這個博客帖子：

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

告訴你如何構建一個字段的自定義的驗證規則。

來源

2009-06-04 10:54:41 Kazar

謝謝，我想出了一個基於你的鏈接的解決方案。 – andreialecu 2009-06-04 11:01:57

只注意到了答案。感謝您發佈鏈接並發現它有用！ – JamesEggers 2012-12-20 14:55:15

感謝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-04 11:03:50 andreialecu

當使用唯一的水印標籤爲每個testboxes（例如「進入姓名」，‘輸入姓氏’......），你可以提高腳本：

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

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

這也將刪除你的腳本中的硬編碼的文本。

來源

2010-09-29 10:13:11 Chris

我使用jQuery的水印插件，但我的情況是相似的：

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-24 01:41:53

不確定驗證插件是如何工作的，但是這是一個可用的獨立模塊。

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-09 22:09:00

jQuery水印輸入和驗證

回答

相關問題