動態驗證 - 只有一個追加

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