【发布时间】：2018-03-08 05:09:29
【问题描述】：
我正在尝试验证来自此表单的输入：
<form id = "mpath" name = "mpath" action = './../cgitest.cgi' method="POST" onsubmit = "return validateForm(this)">
Total Time (in ms): <input type = "text" name = "ttime">
Number of Cars (1-10): <input type = "text" name = "carnum">
Initial Speed (fps): <input type = "text" name = "initspeed"><br>
<!--extraRowTemplate will be repeated for every change in the accleration of the
head car -->
<p class = "extraRowTemplate" name = "extraRowTemplate">
Change:
<select name="change">
<option value="acc">Acceleration</option>
<option value="dec">Deceleration</option>
</select>
Start time: <input type = "text" name="starttime">
End time: <input type = "text" name="endtime">
Amount (in fps): <input type = "text" name="amount"><br>
</p>
<div id = 'container'></div>
<a href="#" id = "addRow"><i class="icon-plus-sign"></i>Add Change</a><br>
<input type="submit" value="Load Head Car">
</form>
使用这个函数（我还没有写任何实际的验证）：
<script type="text/javascript">
function validateForm(form){
var tt = document.forms[0].ttime.value;
var cn = document.forms[0].carnum.value;
var is = document.forms[0].initspeed.value;
var sta = form.elements[4].value;
console.log(tt);
console.log(cn);
console.log(is);
console.log(sta);
if(tt == ""){
alert("starttime must be filled out");
return false;
}
//return false;
}
</script>
但是当我尝试提交值时，它只找到 ttime、carnum 和 initspeed 的值，而不是 starttime、endtime 或 amount 的值。此外，即使我将其设置为“减速”，更改的值也始终为“加速”。
对于那些想知道我为什么不简单地删除 extraRowTemplate 的人，我需要将这些输入选项放在一个嵌套部分中，因为我可以选择复制它们。
我尝试将表单作为参数传递给函数（如图所示），并且只使用 document.forms[0] 来访问它。都不会产生正确的结果。
另外，当我从 form.elements[4].value 中删除 .value 并设置时：
var sta = form.elements[4];
控制台打印出来：
<input type = "text" name = "starttime">
有人知道我如何访问嵌套输入的值吗？
我想我还应该说该表单以其他方式正常工作，当我将它发送到 cgitest.cgi 时，我可以访问所有输入。我只是不想验证服务器端的输入。
编辑：
如果不使用 onsubmit 函数（在我的例子中为 validateForm），我使用事件监听器：
<script type="text/javascript">
var button = document.querySelector('input[type=submit]')
button.addEventListener('click', function onClick(event) {
var ttime = document.querySelector('input[name=ttime]')
var carnum = document.querySelector('input[name=carnum]')
var initspeed = document.querySelector('input[name=initspeed]')
var change = document.querySelector('select[name=change]')
var starttime = document.querySelector('input[name=starttime]')
var endtime = document.querySelector('input[name=endtime]')
var amount = document.querySelector('input[name=amount]')
console.info('ttime', ttime.value)
console.info('carnum', carnum.value)
console.info('initspeed', initspeed.value)
console.info('change', change.value)
console.info('starttime', starttime.value)
console.info('endtime', endtime.value)
console.info('amount', amount.value)
event.preventDefault()
})
</script>
输入 ttime = 1, carnum = 2, initspeed = 3, change = "acc", starttime = 4, endtime = 5, amount = 6，我得到以下控制台输出：
(index):70 ttime 1
(index):71 carnum 2
(index):72 initspeed 3
(index):73 change acc
(index):74 starttime
(index):75 endtime
(index):76 amount
可以看出，除了 initspeed 之外的所有值（extraRowTemplate 中的所有内容）都是空的。就像我之前说的，它们在发送到表单操作 url 时不是空的。
【问题讨论】：
-
您可以使用 HTML5 的
required属性保存一些代码。
标签： javascript html forms