在Javascript中检查文本框是否为空

Question

这是我的代码，如果文本框为空，原本应该弹出一个警告消息：

这是我的代码，如果文本框为空，原本应该弹出一个警告消息：alert

function a(id)
{
    var n=document.getElementById(id).value;
    if (n.length < 1)
    {
        window.alert("Field is blank");
        return false;
    }
}

我遇到的问题是，第一次onChange时该字段未经过验证。但是，当文本框填入一些数据后并被删除时，现在OnChange被触发，并显示alert消息。如何解决这个问题？

- user2020911

---

你想要在按键后立即验证吗？还是需要点击某个按钮才进行验证？请澄清。 - Ravi Gadag

当我在输入数据时更改文本框时，“OnChange” - user2020911

我有点不清楚你所说的字段第一次没有被验证是什么意思，但我猜想你的意思是希望在输入数据后立即进行检查。OnChange事件会在您更改值并且失去对元素的焦点后触发 - 如果您只更改数据，则事件直到您按Tab /鼠标单击文本框之外才会触发。如果您想在每次按键时执行此操作，应在keyup / keydown / keypress事件上触发事件。 - gutsmania

@Ravi先生，您能帮我解决这个问题吗？ - user2020911

Answer 1

onchange 仅在文本框的值与之前的值相比发生更改时才起作用，因此第一次它不起作用，因为状态没有改变。

所以最好使用onblur事件或在提交表单时使用。

function checkTextField(field) {
  document.getElementById("error").innerText =
    (field.value === "") ? "Field is empty." : "Field is filled.";
}

<input type="text" onblur="checkTextField(this);" />
<p id="error"></p>

(或者旧的在线演示.)

- Vishal Suthar

---

您没有考虑到用户只输入空格而没有字符的情况。 - EasyE

Answer 2

在提交表单之前，您的验证应该发生在事件之前。

无论如何，如果您想在onchange上使用此功能，这里是代码。

function valid(id)
{
    var textVal=document.getElementById(id).value;
    if (!textVal.match(/\S/)) 
    {
        alert("Field is blank");
        return false;
    } 
    else 
    {
        return true;
    }
 }

- arvin_codeHunk

Answer 3

function valid(id)
    {
        var textVal=document.getElementById(id).value;
        if (!textVal.match("Tryit") 
        {
            alert("Field says Tryit");
            return false;
        } 
        else 
        {
            return true;
        }
     }

使用此方法来表达事物

- AllOfIt7432

---

看起来你忘记写下你的问题了。请编辑你的帖子并提供更多信息。 - ulou