Question

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

Answer 1

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

Answer 2

你走了：

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

Answer 3

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

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

但是您可能会在将来遇到问题，因为工具提示不是唯一标识的。我不熟悉这个插件，但是如果你可以为每个工具提示添加一个单独的ID，那就为你解决了。完成后，您可以使用ID而不是$（“。tooltip”）来引用工具提示...如果您在执行$(".tooltip").append(/*something*/)或$(".tooltip").HTML(/*something*/)时将其展开为多个输入重新修改每个工具提示..这可能无关紧要，因为一次只能看到一个...但它仍然是一个低效问题和一点点错误

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

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

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

4 个答案: