Question

我正在尝试创建一个将值存储在空数组中的表单，但值必须介于0到5之间，并以逗号分隔。问题是如果值大于5但是仍然将值存储在数组中则会发出警报。我希望它提醒并恢复表单值。

这是我的代码：

while ((check != "True") or (check != "true))

和javascript：

<form name ="form1" onsubmit="return validateForm()">
    <input type="number" name="text" id="inputText" name="inputText" />
    <button onclick="pushData();">Insert</button>
    <p id="pText"></p>
</form>

Answer 1

尝试

if (form <0 || form >= 6)

Answer 2

请注意MDN：

数字输入在空时和单个数字时被视为有效输入，但无效。

使用此特定表单元素，您可以添加min和max属性，以便用户必须输入指定范围内的值。因此，OP的validateForm（）函数的当前内容是多余的。此外，该函数有一行有问题的代码：

if(form <0 && form >= 6) {

您不能拥有小于零且大于或等于六的值。使用逻辑OR，即＆＃34; ||＆＃34;运算符的逻辑工作。

以下代码允许用户选择OP指定范围内的数值，然后以逗号分隔格式显示它们，如下所示：

＆＃13;

var d = document;
d.g = d.getElementById;
var pText = d.g('pText');
pText.innerHTML = "Grades: ";

var inputText = d.g("inputText"); 
var myArr = [];


function pushData() {
   var notrailingcomma = "";
   
   myArr.push(inputText.value);
   
   if (myArr.length > 1) {
     notrailingcomma = myArr.join(", ").trim().replace(/,$/g,"");
     pText.innerHTML = "Grades: " + notrailingcomma;   
   }
   else
   {
      pText.innerHTML += inputText.value;
   }   
}


d.forms["form1"].onsubmit = function(event) {
    event.preventDefault();
    pushData();
};

＆＃13;

p {
padding: 1em;
margin:1em;
background:#eeeeff;
color: #009;
}

＆＃13;

<form name="form1">
<input type="number" id="inputText"  name="inputText"  min=0 max=5 value=0>

<button type="submit">Insert</button>

</form>
        
 <p id="pText"></p>

＆＃13;

关于表格的几点：

OP的输入字段中有一个错误：它有两个名字。我删除了一个名为＆＃34; text＆＃34;。
我喜欢@thgaskell关于改变＆＃34; Insert＆＃34;的建议。进入提交按钮，阻止提交表单的默认操作，并将pushData与表单的onsubmit事件相关联。所以，我已经相应地修改了代码。

Answer 3

我认为如果重新组织函数绑定的位置，它可能会更好。

事件传播顺序：

单击该按钮，将值推入阵列。
表单的submit事件触发并验证值，但为时已晚。

有很多方法可以解决这个问题，但最简单的方法是在pushData的末尾调用validateForm。

调整了条件，因为数字没有办法   同时小于0 AND 大于或等于6。

还添加event.preventDefault以停止提交表单。

<强>的JavaScript

function validateForm (event) {
  event.preventDefault();
  var form = document.forms["form1"]["inputText"].value;
  if (form < 0 || form > 5) {
    alert('value should must be between 0 to 5');
    return false;
  }
  pushData();
}

<强> HTML

<form name="form1" onsubmit="validateForm(event)">
  <input type="number" id="inputText" />
  <button type="submit">Insert</button>
  <p id="pText"></p>
</form>

JSFiddle

Javascript表单值限制

3 个答案: