Fatal编程技术网
  • javascript/
  • Javascript 在文本输入键上，我想在没有任何插件的情况下显示验证错误

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

javascript jquery

Javascript 在文本输入键上，我想在没有任何插件的情况下显示验证错误,javascript,jquery,Javascript,Jquery,在文本输入键上，我想在没有任何插件的情况下显示验证错误。 我试图编写一个通用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 &&

在文本输入键上，我想在没有任何插件的情况下显示验证错误。 我试图编写一个通用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;
        }
    });

}

函数检查编号（txt，e）{
$（txt）.按键（功能（e）{
//如果字母不是数字，则显示错误，不键入任何内容
如果（e.which！=8&&e.which！=0&&e.which<48 | e.which>57））{
如果（！document.getElementById（'spanmsg'））{
$（txt）.after（“这是错误的输入”）
$（'#spanmsg'）。显示（0）。延迟（“500”）。隐藏（0）；
txt.value=''；
}
否则{
$（'#spanmsg'）。显示（0）。延迟（“500”）。隐藏（0）；
txt.value=''；
}
返回false；
}
});
}
相反，请尝试以下键入方法：

$(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 ''; } ) );
    });
希望这能有所帮助。

我在下面列出了完整的代码

<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>


如果有帮助，请评分
window.onload=函数（）{
$（“#txt”）.按键（功能（e）{
//如果字母不是数字，则显示错误，不键入任何内容
如果（e.which！=8&&e.which！=0&&e.which<48 | e.which>57））{
if（！$（txt）.next（）.hasClass（“spanmsg”））{
var error=$（“这是错误的输入”）；
$（txt）.after（错误）；
$（错误）.css({
顶部：（$（txt）.position（）.top+1）+“px”，
左：（$（txt）.position（）.left+1）+“px”，
宽度：$（txt）.width（）+“px”，
高度：$（txt）.height（）+“px”
});
}
$（this）.next（）.show（0）.delay（“500”）.delay（500，函数（）{
$（this.remove（）；
});
这个值=“”；
返回false；
}
});
}
斯潘先生{
位置：绝对位置；
文本对齐：居中；
颜色：红色；
}
如果它有助于您……

仅使用更新后的代码，而不使用其他框架，则进行评分。继续运行它

函数检查编号（txt，e）{
//如果字母不是数字，则显示错误，不键入任何内容
如果（e.which！=8&&e.which！=0&&e.which<48 | e.which>57））{
如果（！document.getElementById（'spanmsg'））{
$（txt）.after（“这是错误的输入”）
$（'#spanmsg'）。显示（0）。延迟（“500”）。隐藏（0）；
txt.value=''；
}
否则{
$（'#spanmsg'）。显示（0）。延迟（“500”）。隐藏（0）；
txt.value=''；
}
返回false；
}
}
$（'#txt'）.keyup（函数（e）{
检查编号（本，e）；
});
谢谢。。但我不想提醒，我想在页面中插入动态div，并将该div作为错误气泡触发，然后淡出。用于将您的错误添加到html中，稍后它不会进入if块，它只存在于if块中……在firebug中，返回值取消定义是我的荣幸。投票，如果你喜欢：）它的工作原理你是如何添加一个警报来打破它的？请将链接应用到您的代码。那么，这里有什么不起作用？你的代码会删除每个字母的输入值，span msg会出现和消失。你能在JSFIDLE上删除它吗？它不工作，我能键入字母，没有什么奇怪的事情发生。你用什么浏览器？当我输入时，字母信息出现在输入的右侧。我发现firefox有问题，但safari和chrome都很好用。事实上，mozila没有用，但chrome Thanks可以用。问题是什么？
#spanmsg
是否显示？我想验证按键上的输入，并将错误消息显示为工具提示错误。我正在寻找通用解决方案的整体应用。 
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);
});