在工具提示中顯示錯誤消息

-1

我有一個用戶註冊表單，我想在小工具提示中顯示密碼規則以及驗證消息，如無效密碼或有效密碼。我的密碼規則是它包含7個字母， 1位數字和1個大寫字母等。在工具提示中顯示錯誤消息

目前我已經完成了這兩個工作，但在兩個不同的工具提示中顯示它，我如何合併兩個並將其顯示在一個工具提示中。

<html> 
<head> 
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> 
    <title>Test</title> 
</head> 
<script> 
function validatePassword(obj) { 
    //rule contains 7 chars and upper case and lower case and digit 
    var password = obj.value; 
    var numLowers = 0; 
    var numCaps = 0; 
    var numDigits = 0; 
    var valid = true; 
    if(password.length > 7) { 
     for(i = 0; i < password.length; i++) { 
      var charCode = password.charCodeAt(i); 
      if(charCode >= 48 && charCode <= 58) 
      numDigits++; 
      else if(charCode >= 65 && charCode <= 90) 
      numCaps++; 
      else if(charCode >= 97 && charCode <= 122) 
      numLowers++; 
     } 
     if(numDigits < 1 || numCaps < 1) 
     valid = false; 
    } 
    else { 
     valid = false; 
    } 
    if(!valid){ 
     document.getElementById("password-error").style.display="block"; 
    } 
    else { 
     document.getElementById("password-error").style.display="none"; 
    } 
} 
</script> 

<body> 
    <div> 
     <form id="test" action ="#"> 
     <div id="password-container"> 
      <input type="text" id= "password" name="password" size="30" onKeyUp="validatePassword(this)" title=" Password contains 7 -20characters <br/> and upper case and digits." /> 
     </div> 
     <div id="password-error" class="error" style="display:none;">Invalid Password</div> 
     </form> 
    </div> 
</body> 
</html> 

$("#test :input").tooltip({ 

    // place tooltip on the right edge 
    position: "center right", 

    // a little tweaking of the position 
    offset: [-2, 10], 

    // use the built-in fadeIn/fadeOut effect 
    effect: "fade", 

    // custom opacity setting 
    opacity: 0.7 

});

您可以在這裏看到

http://jsfiddle.net/ddrYp/6/

來源

2011-11-09 Jens

這裏有一個解決方案，將不需要你同時提供工具提示和密碼錯誤分區。

http://jsfiddle.net/ddrYp/12/

但是你可能會在未來，因爲工具提示不是唯一標識與此遇到的問題。我對插件並不熟悉，但是如果您可以將每個ID添加到每個工具提示，那就爲您解決。一旦你這樣做，你可以通過使用他們的ID而不是$（「。tooltip」）來引用工具提示...如果你擴展這個有多個輸入，當你做$(".tooltip").append(/*something*/)或$(".tooltip").HTML(/*something*/)你會修改每個工具提示..這可能並不重要，因爲只有一個是一次明顯的...但它仍然是一個低效率的問題，有點錯誤

這裏是在ebay password verification例子，你正在尋找的例子：
http://jsfiddle.net/cFrpz/7/

來源

2011-11-09 21:38:46

謝謝兄弟！我非常感謝你的幫助。但是，你能給我一個小提示，我怎樣才能實現像這樣的https://scgi.ebay.com/ws/eBayISAPI.dll?RegisterEnterInfo密碼驗證和PLZ指向密碼字段。 – Jens

是的，我正在做一個小例子。 –

http://jsfiddle.net/cFrpz/1/ –

工作的例子試試這個http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

來源

2011-11-09 20:54:53 coder

感謝您的回覆。 – Jens

我歡迎你。如果它對你有幫助，你可以通過檢查左邊的勾號來接受答案。 – coder

感謝bro ..我不能使用太多的jquery插件。我正在尋找什麼東西，我可以顯示驗證是否通過或在工具提示中失效（因爲它發生在飛行中）。謝謝 – Jens

我沒有測試過這一點，但它應該是罰款。與此

if(!valid){ 
    document.getElementById("password-error").style.display="block"; 
} 
else { 
    document.getElementById("password-error").style.display="none"; 
}

：從您的工作例如，更換此

$tooltip = $(".tooltip"); 
if(!valid && $tooltip.find("div.error").length < 1){ 
    $tooltip.append("<div class='error'>"+$("#password-error").html()+"</div>"); 
} 
else if(valid) { 
    $tooltip.find(".error").remove(); 
}

來源

2011-11-09 21:03:13

是啊..它好。但它重複所有的錯誤信息，如果我鍵入6字母它顯示6無效的密碼PLZ檢查http://jsfiddle.net/ddrYp/10/ – Jens

看到更正 –

我真的很困惑現在，你的解決方案太好了..是否有任何方式，我們如何可以看到驗證的動態，如這個密碼提交https://scgi.ebay.com/ws/eBayISAPI.dll?RegisterEnterInfo – Jens

在這裏你去：

<html> 
<head> 
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> 
    <title>Test</title> 
</head> 
<script> 
function validatePassword(obj) { 
    //rule contains 7 chars and upper case and lower case and digit 
    var password = obj.value; 
    var numLowers = 0; 
    var numCaps = 0; 
    var numDigits = 0; 
    var valid = true; 
    if(password.length > 7) { 
     for(i = 0; i < password.length; i++) { 
      var charCode = password.charCodeAt(i); 
      if(charCode >= 48 && charCode <= 58) 
      numDigits++; 
      else if(charCode >= 65 && charCode <= 90) 
      numCaps++; 
      else if(charCode >= 97 && charCode <= 122) 
      numLowers++; 
     } 
     if(numDigits < 1 || numCaps < 1) 
     valid = false; 
    } 
    else { 
     valid = false; 
    } 
    if(!valid){ 
     $(".tooltip").append($("#password-error")); 
     document.getElementById("password-error").style.display="block"; 

    } 
    else { 
     document.getElementById("password-error").style.display="none"; 
    } 
} 
</script> 

<body> 
    <div> 
     <form id="test" action ="#"> 
     <div id="password-container"> 
      <input type="text" id= "password" name="password" size="30" onKeyUp="validatePassword(this)" title=" Password contains 7 -20characters <br/> and upper case and digits." /> 

     </div> 
<div id="password-error" class="error" style="display:none;">Invalid Password</div> 
     </form> 
    </div> 
</body>

http://jsfiddle.net/ddrYp/9/

來源

2011-11-09 21:04:16 GregM

感謝您的答覆兄弟。我想在工具提示中顯示無效的密碼消息，而不是離開。 – Jens

對不起，出錯了，應該現在工作 – GregM

新小提琴工作 – GregM

在工具提示中顯示錯誤消息

回答

相關問題