动态验证-只需一个附加

Dynamic validating - just one append

本文关键字：一个 验证 -只 动态      更新时间：2023-09-26

我正在尝试快速验证它，并在弹出窗口中显示它#result，但是我不能只添加一次项目。我尝试了e.preventDefault（）和e.stopPropagation（）-两者都不起作用.html不是一个解决方案，因为我不想在一个div中有两段（或更多）。如何停止？

工作示例

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

已修复，请尝试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();
    }
});
});

  • 嗯，你的问题需要什么还不太清楚，但这是我根据我的理解所做的。

  • 我更干净地实现了这一点，并修复了行为（我希望这是您所需要的）。

  • 只是想添加一些内容。如果您将来需要更复杂的验证或减少代码行，请尝试以下插件，它非常有用且易于使用：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);
};

检查您是否已经使用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();
}
相关文章：