使用keyup控制规则而不使用警报（纯javascript）_Javascript_Html

使用keyup控制规则而不使用警报（纯javascript）

javascript html

使用keyup控制规则而不使用警报（纯javascript）,javascript,html,Javascript,Html,我正在研究验证规则，我想使用纯javascript。我还想使用JQuery验证程序。这就是我的问题。我正在键入表单的不同字段，我希望在客户端键入时（动态地）检测无效。我找到了一个解决方案，但这不是必需的结果。因此，我不想使用警报功能。这是我的密码： $('#name').keyup(function(key) { if (this.value.length >= 2 || this.value == '') { alert('my messag

我正在研究验证规则，我想使用纯javascript。我还想使用JQuery验证程序。这就是我的问题。我正在键入表单的不同字段，我希望在客户端键入时（动态地）检测无效。我找到了一个解决方案，但这不是必需的结果。因此，我不想使用警报功能。这是我的密码：

   $('#name').keyup(function(key)
   {
    if (this.value.length >= 2 || this.value == '')
     {
        alert('my message'); // This works but it not what I want to do.
        // I want to have a message after my field with the error message.

        $('#name').after('<span class="error"> my message</span>');
        //This is what I try also but it repeat the message many times.

        document.getElementById("name").innerHTML = "my message";    
        // I tried this but I didn't see anything in my browser.         
   }
});

$（'#name'）.keyup（函数（键）
{
如果（this.value.length>=2 | | this.value==''）
{
警报（‘我的消息’）；//这是有效的，但不是我想做的。
//我希望在我的字段后面有一条带有错误消息的消息。
$（'#name'）。在（'my message'）之后；
//这是我也尝试过的，但它多次重复这个信息。
document.getElementById（“name”）.innerHTML=“我的消息”；
//我尝试了这个，但在我的浏览器中没有看到任何东西。
}
});

在这个函数中，我想做的是打印一条消息，告诉我这个字段是空的，一旦不是空的，它就会消失。

有什么建议吗？

以下是一个完全有效的示例：

你需要一个

$(document).ready(function() {

周围

$(document).ready(function() {
    $('#name').keyup(function(key){
        if (this.value.length >= 2 || this.value == ''){
            alert('my message'); // This works but it not what I want to do.
            // I want to have a message after my field with the error message.

            $('#name').after('<span class="error"> my message</span>');
            //This is what I try also but it repeat the message many times.

            document.getElementById("name").innerHTML = "my message";    
            // I tried this but I didn't see anything in my browser.         
       }
    });
});

不是纯粹的JS

既然你说你想要纯Javascript，为什么不能使用jQuery呢

<html>
    <body onload=myFunction2()>
        <input type="text" id="myinput" onkeyup="myFunction()" /> 
        <span id="myspan" style="color:red;" ></span>

        <script>

            var myspan = document.getElementById("myspan");


            function myFunction(){

                var l = document.getElementById('myinput').value;
                if (l.trim().length >= 2 || l.trim() == '')
                    {
                        myspan.innerHTML = "My error message";
                    }
                else{
                    myspan.innerHTML = '';
                }
            }

            function myFunction2(){

                var l = document.getElementById('myinput').value;
                if(l.trim() == ''){
                    myspan.innerHTML = "Do not let this field empty.";
                }

            }
            </script>
    </body>
</html>


var myspan=document.getElementById（“myspan”）；
函数myFunction（）{
var l=document.getElementById（'myinput'）。值；
如果（l.trim（）.length>=2 | | l.trim（）=''）
{
myspan.innerHTML=“我的错误消息”；
}
否则{
myspan.innerHTML=''；
}
}
函数myFunction2（）{
var l=document.getElementById（'myinput'）。值；
如果（l.trim（）=''）{
myspan.innerHTML=“不要让此字段为空。”；
}
}

$（文档）.ready（函数（）{
$（'#name'）.keyup（函数（）{
//我使用jquery获取输入的值
如果（$（'#name'）.val（）.length>=2（'#name'）.val（）=''）{
//警报（“消息”）；
log（'函数进入'）；
$（'#name'）。在（'my message'）之后；
//document.getElementById（'name'）.innerHTML='MyMessage'；
//更改输入的值，应使用val（）或value；
//$（'#name'）.val（'myMessage'）；
document.getElementById（'name'）。value='my message'；
}
})
})

$（“#name”）

不是一个纯JavaScriptor可能您需要详细说明为什么在您不想使用纯js和jquery时混合使用纯js和jquery…很抱歉，我应该明确指出，我没有使用jquery Validator，我无法使用它，因为它们强加给我。我尝试了您提出的建议，但没有成功。请查看我在上面发布的JSFIDLE，它是有效的。你能检查一下浏览器控制台吗？有错误吗？你导入了jQuery吗？这是为了使用引导。我尝试了JSFIDLE代码，但它不起作用，但我不知道那里的代码应该做什么。。。要打开多个浏览器；）是的，这一个看起来也不错，但他需要jquery来引导。。。所以他已经有了进口。。。因此，我不明白为什么不使用jQueryTanks，但如果我的长度等于1，则消息错误不会消失，例如。@ysd请尝试新代码……注意，我已更改了script@Felix我在这里的某个地方读到这是强加给他的。。。那可能是why@ysd阅读我刚刚发布的代码。首先，错误消息不存在。我在脚本中说，在开始之前清除跨度。只要满足条件

l.length>=2 | | l==''

，就会打印错误消息。因此，当您第一次按下输入字段中的一个键时，脚本将开始执行其工作。您应该提供一个真正的答案，而不仅仅是普通代码。你做了什么来解决这个问题？为什么？

<html>
    <body onload=myFunction2()>
        <input type="text" id="myinput" onkeyup="myFunction()" /> 
        <span id="myspan" style="color:red;" ></span>

        <script>

            var myspan = document.getElementById("myspan");


            function myFunction(){

                var l = document.getElementById('myinput').value;
                if (l.trim().length >= 2 || l.trim() == '')
                    {
                        myspan.innerHTML = "My error message";
                    }
                else{
                    myspan.innerHTML = '';
                }
            }

            function myFunction2(){

                var l = document.getElementById('myinput').value;
                if(l.trim() == ''){
                    myspan.innerHTML = "Do not let this field empty.";
                }

            }
            </script>
    </body>
</html>

    $(document).ready(function(){
        $('#name').keyup(function(){
            //i use jquery get input's value 
            if($('#name').val().length >=2 || $('#name').val() == ''){
                //alert('message');
                console.log('function go into');
                $('#name').after('<span class="error"> my message </span>');
                //document.getElementById('name').innerHTML = 'my message';
                //change input's value ,should use val() or value;
                //$('#name').val('myMessage');
                document.getElementById('name').value = 'my message';
            }
        })
    })