javascript - 如何使 <input type ="text"/> 的字符串/内容为其值？

Question

代码如下:HTML:

<input type="text" id="name" name="name" placeholder="Your Name" onblur="namerr()">
<br>
<label id="name_labl">This field is required.</label>

CSS:

#name_labl {
    display: none;
}

JavaScript:

var nameForm = document.getElementById("name").value.length;
function namerr() {
                if (nameForm < 1) {
                  document.getElementById("name_labl").style.display="block";
                  document.getElementById("name").style.borderColor="red";
            } else {
                  document.getElementById("name_labl").style.display="none";
                  document.getElementById("name").style.borderColor="black";
            }

<小时/>我尝试使用多种方法，从使用 var name_form = document.forms["mailSender"]["name"].value.length;而不是 document.getElementById("name").value.length;至 if (nameForm==null || nameForm=="")而不是 nameForm<1 .

没有一个有效。
你看，无论我做什么，我总是得到 <input /> 的实际值 ，就像这样 – <input type="text" value="some value" /> 。但是，而不是 value ，我正在使用placeholder 。
无论表单内的文本是什么，在 value.length 的情况下，我总是会得到“0”或什么也没有。或者只是 .value ，分别。

所以我决定将 <input type="text" /> 的内容制作出来其值，然后测量其长度来确定表格是否已填写。

关于如何做到这一点有什么想法吗？

Answer 1

当您读取该值后发生更改时，该值不会自动更新。您需要在函数内部读取它才能获取最新值。

function namerr() {
    var nameForm = document.getElementById("name").value.length;
    if (nameForm < 1) {
         document.getElementById("name_labl").style.display="block";
         document.getElementById("name").style.borderColor="red";
    } else {
          document.getElementById("name_labl").style.display="none";
          document.getElementById("name").style.borderColor="black";
    }
}