在文本输入键上，我想在没有任何插件的情况下显示验证错误

On text-input keypress I want to show validation error without any plugin

本文关键字：插件任何情况下错误验证显示输入文本更新时间：2023-09-26

在文本输入键上，我想在没有任何插件的情况下显示验证错误。我正在尝试编写一个通用的jQuery函数，它可以在任何页面中使用。错误弹出窗口应该是动态的。

function checkno(txt,e) {
    $(txt).keypress(function (e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            if (!document.getElementById('spanmsg')) {
                $(txt).after("<span id='spanmsg'  class='fixed'>This is wrong input</span>")                    
                $('#spanmsg').show(0).delay("500").hide(0);
                txt.value = '';
            }
            else {                    
                $('#spanmsg').show(0).delay("500").hide(0);
                txt.value = '';
            }
            return false;
        }
    });
}

我把整个代码放在下面，

<html>
<head>
    <title>Please Rate if it helps</title>
    <!-- PUT A PATH OF JQUERY LIBRARY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <script>
        window.onload = function () {
            $("#txt").keypress(function (e) {
                //if the letter is not digit then display error and don't type anything
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    if (!$(txt).next().hasClass("spanmsg")) {
                        var error = $("<div class='spanmsg'>This is wrong input</div>");
                        $(txt).after(error);
                        $(error).css({
                            top: ($(txt).position().top + 1) + "px",
                            left: ($(txt).position().left + 1) + "px",
                            width: $(txt).width() + "px",
                            height: $(txt).height() + "px"
                        });
                    }
                    $(this).next().show(0).delay("500").delay(500, function () {
                        $(this).remove();
                    });
                    this.value = '';
                    return false;
                }
            });
        }
    </script>
    <style>
        .spanmsg {
            position: absolute;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" id="txt">
</body>
</html>

如果它对你有帮助，请打分。。。

相反，请尝试keyup方法作为：

$(theElement).keyup(function() {
        var $th = $(this);
        $th.val( $th.val().replace(/[^0-9]/g, function(str) { alert('You typed " ' + str + ' ".'n'nPlease use only numbers.'); return ''; } ) );
    });

希望这能有所帮助。

只使用更新到这一点的代码，没有额外的框架。在JSFiddle上运行。

function checkno(txt,e) {
        //if the letter is not digit then display error and don't type anything
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            if (!document.getElementById('spanmsg')) {
                $(txt).after("<span id='spanmsg'  class='fixed'>This is wrong input</span>")                    
                $('#spanmsg').show(0).delay("500").hide(0);
                txt.value = '';
            }
            else {                    
                $('#spanmsg').show(0).delay("500").hide(0);
                txt.value = '';
            }
            return false;
        }
}
$('#txt').keyup(function (e) {
    checkno(this,e);
});