在工具提示中显示错误消息答案

【问题标题】：Show error message in a tool tip在工具提示中显示错误消息
【发布时间】：2011-11-09 20:53:23
【问题描述】：

我有一个用户注册表单，我想在小工具提示中显示密码规则以及无效密码或有效密码等验证消息。我的密码规则是它包含 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/

【问题讨论】：

标签： javascript jquery html jquery-plugins passwords

【解决方案1】：

这是一个解决方案，您不需要同时使用工具提示和密码错误 div。

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

但是您将来可能会遇到此问题，因为工具提示不是唯一标识的。我不熟悉该插件，但如果您可以为每个工具提示添加一个单独的 ID，那就为您解决问题。一旦你这样做了，你可以通过使用他们的ID而不是$（“.tooltip”）来引用工具提示......如果你在$(".tooltip").append(/*something*/)或$(".tooltip").HTML(/*something*/)时将其扩展为具有多个输入，你将要修改每个工具提示......这可能无关紧要，因为一次只有一个可见......但这仍然是一个效率低下的问题和一点错误

这是您正在寻找的 ebay password verification 示例：
http://jsfiddle.net/cFrpz/7/

【讨论】：

谢谢兄弟！我真的很感谢你的帮助。但是你能给我一个小提示，告诉我如何实现这样的密码验证scgi.ebay.com/ws/eBayISAPI.dll?RegisterEnterInfo 并请指向密码字段。
天啊！！我不敢相信..你是一个忍者....谢谢一百万...我真的很感谢你的帮助...
我不知道该怎么感谢你。你真的很有帮助。还有一个问题，我怎样才能只显示 onclick 或 onfous 的工具提示？

【解决方案2】：

试试这个http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

【讨论】：

欢迎您。如果对您有帮助，您只需勾选左侧的勾号即可接受答案。
谢谢兄弟..我不能使用太多的 jquery 插件。我正在寻找如何在工具提示中显示验证通过或失败（如即时发生）。谢谢
没关系，兄弟，我们是来互相帮助的！

【解决方案3】：

给你：

<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/

【讨论】：

感谢兄弟的回复。我想在工具提示中显示无效的密码消息，而不是离开。
Greg 我还有一个问题，如果您不介意请指教我如何执行此操作，我想要此页面上的内容scgi.ebay.com/ws/eBayISAPI.dll?RegisterEnterInfo 并请点击密码归档。我们该怎么做？
你的意思是右边的小力量条？在 google 上查找密码强度检查器，但我对此的看法是：带有很多单词的密码，例如：“我喜欢和马分享我的饭菜”比 %bob1A3f 更好、更安全。看看这个：enterpriseirregulars.com/41747/password-strength-and-security
也许你可以为 ebay 做另一个问题，比如密码工具提示

【解决方案4】：

我没有对此进行测试，但应该没问题。从您的工作示例中，替换为：

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();
}

【讨论】：

是的..它很好。但是它会重复所有的错误消息，比如如果我输入 6 个字母它会显示 6 个无效密码请检查jsfiddle.net/ddrYp/10
我现在真的很困惑，你的解决方案也很好..有什么方法可以让我们即时查看验证，比如提交scgi.ebay.com/ws/eBayISAPI.dll?RegisterEnterInfo的密码