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

发布于 2025-02-07 23:56:16 字数 244 浏览 2 评论 0原文

我有一些麻烦来验证用户输入时的验证。

例如：有效范围是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中做到这一点，谁能帮助我？

原文

I have some troubles to validate user input while they are typing.

For example: the valid range is 600-800 and user is trying to type 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

I hope I can do it in js, can anyone help me?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

定格我的天空 2025-02-14 23:56:16

这是一个示例：

<input type="text" id="myTextBox" onKeyUp="checkInput()" />
<script>
var myTextBox = document.getElementById('myTextBox');
function checkInput() {
  var value = myTextBox.value;
  if (!value || isNaN(value) || parseInt(value, 10) < 700 || parseInt(value, 10) > 800) {
    myTextBox.style.backgroundColor = 'red';
  } else {
    myTextBox.style.backgroundColor = 'green';
  }
}
</script>

Here is an example:

<input type="text" id="myTextBox" onKeyUp="checkInput()" />
<script>
var myTextBox = document.getElementById('myTextBox');
function checkInput() {
  var value = myTextBox.value;
  if (!value || isNaN(value) || parseInt(value, 10) < 700 || parseInt(value, 10) > 800) {
    myTextBox.style.backgroundColor = 'red';
  } else {
    myTextBox.style.backgroundColor = 'green';
  }
}
</script>

回复收藏 0 原文

梦归所梦 2025-02-14 23:56:16

可以使用on Keyup事件，在此处查看

keyp up event

回复收藏 0 原文

恍梦境° 2025-02-14 23:56:16

这是另一个例子，看起来您的问题已经回答了。

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

Here is another example, looks like your question was already answered as I was writing this.

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

回复收藏 0 原文

不弃不离 2025-02-14 23:56:16

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

如果您尝试 onkeypress 它应该做自己的事。

回复收藏 0 原文

披肩女神 2025-02-14 23:56:16

您可以同时使用输入和更改事件。当键按导致字符输入时，输入将发射。当字段变化后，文本字段的焦点丢失时，更改将发射，我认为在大多数浏览器中也从剪贴板粘贴到文本后。

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

You could use both the input and change events. Input will fire when a key press results in a character input. Change will fire when the focus of the text field is lost after the value of the field has changed, and I think in most browsers also after text is pasted into it from the clipboard.

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

回复收藏 0 原文

~没有更多了~