Question

在这个例子中：

<form name="someform" action="somepage.php" method="post">
    <input name="length" id="length" type="number" min="1" oninput="validate()"/>
    <input type="submit" id="submit" value="submit" />
</form>

我想禁用任何不大于0的长度值的提交按钮。输入上有min =“1”，当用户依靠向上/向下按钮输入值时效果正常，但它并没有阻止他们用键盘输入0。所以我添加了以下验证js函数。

function validate() {
   var valid = true;
   length = document.getElementById("length").value;
   if(!length > 0) {
       valid = false;
   }    
   document.getElementById("submit").disabled = valid == false;
}

如果在框中输入0并且我不明白原因，则此函数返回valid = true。如果框中有一个数字并删除它以使该框为空，则它将返回false，但此处的0始终为true。

编辑：您可以输入一个负数，如-5，也会返回true。

我在这里有一个jsbin示例：http://jsbin.com/qatekupuzu/edit?html,js,console,output

任何有助于正常工作的帮助将不胜感激。

Answer 1

不需要任何if直接将测试存储在布尔值valid中。像这样：

function validate() {
   var length = document.getElementById("length").value; // get the value
   var valid = length > 0;                               // if length is > 0 then valid will be true, otherwise it will be false
   document.getElementById("submit").disabled = !valid;  // disable if only valid is false
}

Answer 2

你不应该写!length > 0。而是使用length != 0或length <= 0

Answer 3

似乎没有人抓住这个，所以我会把这个答案放在一边，以便了解这里真正发生的事情。

你的陈述表现得像这样的原因是因为它不是你认为的陈述。让我们检查一下，看看。

if(!length > 0)就是您输入的内容。 if内的这个陈述实际上是两个陈述。首先评估!length，然后将其值与> 0进行比较。

!length计算为布尔值，如果数字为0，则仅为true。任何其他数字的计算结果为false。然后因为>的左运算符是布尔> 0，所以它被评估为boolean > boolean，如果语句为true，则仅计算true > false。

所以问题不是声明返回错误，你只是没有使用你想要的语句。您打算撰写的内容是if( !(length >0) ){ valid = false; }或更简洁if(length <=0) { valid = false; }

编辑：另一个因素是在这里发挥作用，根据变量名length欺骗了我。调用typeof(length)会显示此变量为string，尽管该元素有number强制执行。以上内容对类型string应用相同的修改，!""是唯一评估为true的字符串。

我不清楚您是否正在尝试验证此字符串的长度是否超过0（即非空），或者您是否要验证用户输入的数字是否大于0.如果前者是在这种情况下，然后评估length.length就是你想要的。对于后者，您需要先使用int将其解析为parseInt()。

Answer 4

为什么不：

 document.getElementById("length").oninput=function (){
   this.value=Math.max(this.value,1);
 }

或者：

 document.getElementById("length").oninput=function (){
   this.value=this.value>0?this.value:"";
 }

用户更容易理解，而不是禁用......

Answer 5

./node_modules/.bin/webpack会触发每个按键，因此最好初始化validate()和lengthInput个对象一次，并在函数中使用它们以获得更好的性能。

submitButton

var lengthInput = document.getElementById("length"),
    submitButton = document.getElementById("submit");

function validate() {
   submitButton.disabled = !(lengthInput.value > 0);  
}

// initial validation
validate();

Answer 6

现代浏览器不需要JavaScript来禁用输入。

input:invalid {
  /* background-color: #ffdddd; */
}

form:invalid [type="submit"] {
  opacity: .5;
  pointer-events: none;
}

<form name="someform" action="somepage.php" method="post">
    <input name="length" id="length" type="number" min="1" required/>
    <input type="submit" id="submit" value="submit"/>
</form>

您的代码存在错误，实际上是((!length) > 0)。将其更改为!(length>0)或(length<=0)会更有意义。你真的在比较一个字符串和一个数字，所以它应该是Number(length)所以你不依赖于类型强制。

js if（！value＆gt; 0）数字输入验证返回错误

6 个答案: