动态验证 - 只有一个追加

Question

我试图快速验证它并在弹出框中显示它#result，但是 我不能只添加我的项目一次。我试过e.preventDefault（）;和e.stopPropagation（）; - 两者都不起作用。 .html不是解决方案，因为我不想在div中放置两个（或更多）段落。如何停止他们？

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

检查，如果你已经添加使用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(); 
} 

Answer 3

• 嗯，这不是那么清楚，你在你的问题需要什么，但是这是我从我理解的那样。

• 我实施了这个有点清洁，并修复了行为（我希望这是你所需要的）。

• 只是为了添加一些东西。如果您需要在未来更复杂的验证或减少的代码行试试下面的插件，它是真正有用的，易于使用：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); 
};