如何在用户键入值时验证文本框使用javascript

时间:2017-02-28 16:45:45

标签: javascript validation textbox

我在输入时验证用户输入时遇到了一些麻烦。

例如:有效范围是600-800,用户正在尝试输入700

When textbox is empty: show nothing

When textbox is 7: show red

When textbox is 70: show red

When textbox is 700:show nothing

我希望我能用js做,有人可以帮助我吗?

5 个答案:

答案 0 :(得分:2)

以下是一个例子:

public void Napln () { //filling the array
        int poc = 1;

        for (int i = 0; i < pole.GetLength(1); i++)
        {
            Console.Write(" ");
            for (int j = 0; j < pole.GetLength(0); j++)
            {
                if (poc < 10)
                    Console.Write(" " + (pole[j, i] = poc++) + "  | ");
                else if ( poc < 100 )               
                    Console.Write( (pole[j,i] = poc ++) + "  | ");
                else                    
                    Console.Write((pole[j, i] = poc++) + " | ");                    
            }
            Console.WriteLine();
            for ( int v = 0; v < roz1; v ++ )
                Console.Write("_____|");
            Console.WriteLine();
        }
        Console.WriteLine();

 public void Pozice (int vyber) //find the user choice 
    {
        for ( int i = 0; i < pole.GetLength(1); i ++ )
        {
            for ( int j = 0; j < pole.GetLength(0); j ++ )
            {
                if (pole[i, j] == vyber)
                {
                    pole[i, j] = 'X';          
                    hraci.Vypis();
                }
            }
        }
    }
 public void Vypis() //print the same with change of user choice
    {
        for ( int i = 0; i < pole.GetLength(1); i ++ )
        {
            Console.Write(" ");
            for ( int j = 0; j < pole.GetLength(0); j ++ )
            {
                if (pole[j,i] < 10)
                    Console.Write(" " + pole[j, i] + "  | ");
                else if (pole[j,i] < 100)
                    Console.Write(pole[j, i] + "  | ");
                else
                    Console.Write(pole[j, i] + " | ");
            }
            Console.WriteLine();
            for (int v = 0; v < roz1; v++)
                Console.Write("_____|");
            Console.WriteLine();
        }
    }

答案 1 :(得分:1)

这是另一个例子,看起来你的问题在我写这篇文章时已经回答了。

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset = "utf-8">
    <style>
        .red {
            background-color: red;
        }
    </style>
    </head>
    <body>
        <form id="myForm">
        <input type="text" id="validate" class=""/>
        </form>
    <script>
    function pressHandler(e) {
        console.log(this.value);
        if (parseInt(this.value) <= 700) {
            this.className = "red";
        } else {
            this.className = "";
        }
    }

    document.getElementById("validate").addEventListener("keyup",pressHandler);
    </script>

    </body>
</html>

答案 2 :(得分:0)

听起来您正在使用 onchange 事件。

如果您尝试 onkeypress ,它应该按照您的目标行事。

答案 3 :(得分:0)

on keyUp事件可用于此,请看这里

Keyp up event

答案 4 :(得分:0)

您可以同时使用inputchange事件。当按键导致输入字符时,将触发输入。在更改了字段的值之后失去了文本字段的焦点时,更改将触发,并且我认为在大多数浏览器中,也是从剪贴板将文本粘贴到文本中之后。

document.getElementById('validate').addEventListener('input', pressHandler);
document.getElementById('validate').addEventListener('change', pressHandler);