Question

我正在尝试快速验证它并在弹出 #result 中显示它，但是我不能只添加一次我的项目。我尝试了 e.preventDefault（）; 和 e.stopPropagation（）; - 两者都无效。 .html 不是解决方案，因为我在div中不会有两个（或更多）段落。怎么停止'em？

Working example

我的HTML代码：

HTML：

<form name="form" id="form" method="post">
<span> Write pwd: </span> 
<input id="login" name="login" type="text" />
</form>
<div id="result" class="tooltip"></div>

和JavaScript：

$(document).ready(function () {

    $('#login').keyup(function() {
    var th = document.getElementById('login').value;
        if (th.length < 6){
            $('#result').css('display','inline');
            $('#result').append('<p id="too_short">Too short password.</p>');
        }   else{
        $("#too_short").remove();
        }

        if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')){
            $('#result').css('display','inline');
            $('#result').append('<p id="forb_char">Forbidden characters</p>');
        }   else{
            $("#forb_char").remove();
        }

    });
});

Answer 1

已修复，请尝试http://jsfiddle.net/amostk/9n2db67u/17/

$(document).ready(function () {

$('#login').keyup(function() {
var th = document.getElementById('login').value;
    if (th.length < 6){
        $('#result').css('display','inline');
//add a variable to check if #too_sort exist
        var ex = $("#too_short").text();
//if it exists, do not append again else add
        if(!ex)
        {
            $('#result').append('<p id="too_short">Too short password.</p>');
//remove #forb_char if exists
            $("#forb_char").remove();
        }
    }   else{
      $("#too_short").remove();
    }

    if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')){
        $('#result').css('display','inline');
   //add a varible to check if "#forb_char exists

       var en = $("#forb_char").text();
   // if exists do not add else add
        if(!en)
        {
        $('#result').append('<p id="forb_char">Forbidden characters</p>');
 //remove all #too_short for only one validation
            $("#too_short").remove();
        }
    }   else{
        $("#forb_char").remove();
    }

});
});

Answer 2

嗯，你问题中你需要的不是很清楚，但这就是我从我所理解的内容中所做的。
我实现了一点清洁并修复了行为（我希望它是你需要的）。
只是为了添加一些东西。如果您将来需要更复杂的验证或减少代码行，请尝试以下插件，它非常有用且易于使用：http://jqueryvalidation.org/
现场演示： http://jsfiddle.net/nwu3ojft/

<强> HTML：

<form name="form" id="form" method="POST"> 
    <span>Write pwd: </span> 
    <input id="login" name="login" type="text" />
</form>
<div id="result" class="tooltip"></div>

<强> CSS：

首次指定所需的display属性，每次验证密码时都无需添加。

div.#result {
    display: inline;
}

<强> jQuery的：

请阅读代码评论。

// Available error messages
var errorMessage = {
    tooShort: 'Too short password', 
    forbChar: 'Forbidden characters'
};

$(function() {

    var login = $('#login');

    login.on('keyup', function(e) {
        var pwd = this.value, 
            isValid = isValidPwd(pwd, true);

        if (isValid) {
            // Clear error message
            setMsg('');
        }
    });

});

/**
 * Check if password input is valid
 *
 * @param {String} value To be checked
 * @param {Boolean} showErrors Flag to display errors or not
 * @returns {Boolean} isValid
 */
function isValidPwd(value, showErrors) {
    var isValid = true, 
        error;

    // Rule #1
    if (value && value.length < 6) {
        error = '<p>' + errorMessage.tooShort + '</p>';
        isValid = false;
    } 

    // Rule #2
    if (value && (value.indexOf('\'') >= 0 || 
               value.indexOf('\"') >= 0 || 
               value.indexOf('\\') >= 0 || 
               value.indexOf('\/') >= 0)) {
        error = '<p>' + errorMessage.forbChar + '</p>';
        isValid = false;
    }

    // Check flag
    if (showErrors) {
        setMsg(error);
    }

    return isValid;
};

/**
 * Used to set a message in the UI
 */
function setMsg(value) {
    $('#result').html(value);
};

Answer 3

使用indexOf()检查您是否已添加警告：

if($('#result').text().indexOf("Too short password.")==-1){
     if (th.length < 6){
        $('#result').css('display','inline');
        $('#result').append('<p id="too_short">Too short password.</p>');
    }
}else{
    $("#too_short").remove();
}

if($('#result').text().indexOf("Forbidden characters")==-1){
   if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')){
        $('#result').css('display','inline');
        $('#result').append('<p id="forb_char">Forbidden characters</p>');
    }
}else{
    $("#forb_char").remove();
}

动态验证 - 只需一个附加

3 个答案: