gpt4 book ai didi

javascript - 在提交之前验证表单数据,并基于验证使用 javascript 调用另一个函数

转载 作者:可可西里 更新时间:2023-11-01 13:45:46 27 4
gpt4 key购买 nike

我是网络开发的新手。我正在构建一个应用程序来记录工作量。目前我正在强制执行表单元素。需要检查是否所有字段都已填充,然后将表单数据导出到 excel。

我已经写了下面的代码,在向我开火之前请先考虑一下我是这方面的新手。

目前我不关注 CSS 部分,所以我没有 css 文件。

<html>

<head>
<script type="text/javascript" language="javascript">
function WriteToFile(passForm) {

var fso = new ActiveXObject("Scripting.FileSystemObject");
var fileLoc = "E:\\sample.csv";
var file = fso.openTextFile(fileLoc, 8, true, 0);
file.writeline(passForm.inputText.value + ',' +
passForm.timeSpent.value + ',' +
passForm.SystemDate.value + ',' +
passForm.UserName.value);
file.Close();
alert('File created successfully at location: ' + fileLoc);

}

onload = function systemDate() {

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();

if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var today = mm + '/' + dd + '/' + yyyy;
document.getElementById("date").value = today;

}
</script>
</head>

<body>
<p>Happily log your effort!</p>
<form>
Ticket Number : <input id="inc" type="text" name="inputText" required="true" size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent" required="true" size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
<input type="Submit" value="submit" onclick="WriteToFile(this.form)">
</form>
</body>

</html>

请帮助我成功验证所有字段并导出数据。

这是一个更简单的代码,我在其中标记了必填字段元素,但即使必填字段为空,表单数据仍会导出,实际上验证是在导出后进行的。

最佳答案

试试这个 - 请注意我一直很务实并使用 onload 和表单元素访问 - 这是因为它可以在所有浏览器中工作而无需加载 jQuery 等东西。我也没有测试有效日期。有成千上万的脚本可以做到这一点

另请注意,如果您想自己进行简单的错误处理,则需要删除 required 。如果您希望 HTML5 处理自定义错误处理,您将面临 IE <11

中的兼容性问题

HTML5 form required attribute. Set custom validation message?

所以这个使用简单的验证,现在我删除了 required

<html>

<head>
<script>
function WriteToFile(passForm) {

var fso = new ActiveXObject("Scripting.FileSystemObject");
var fileLoc = "E:\\sample.csv";
var file = fso.openTextFile(fileLoc, 8, true, 0);
file.writeline(passForm.inputText.value + ',' +
passForm.timeSpent.value + ',' +
passForm.SystemDate.value + ',' +
passForm.UserName.value);
file.Close();
alert('File created successfully at location: ' + fileLoc);

}

function pad(num) {return String("0"+num).slice(-2)}
function systemDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
document.getElementById("date").value = pad(mm) + '/' + pad(dd) + '/' + yyyy;
}

window.onload=function() {
systemDate();
document.getElementById("myForm").onsubmit=function() {
if (this.inputText.value=="") {
alert("Please enter Ticket Number");
this.inputText.focus();
return false;
}
if (this.timeSpent.value=="") {
alert("Please enter TimeSpent");
this.timeSpent.focus();
return false;
}
WriteToFile(this);
return false; // cancel submit
}
}

</script>
</head>

<body>
<p>Happily log your effort!</p>
<form id="myForm">
Ticket Number : <input id="inc" type="text" name="inputText" size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent" size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
<input type="Submit" value="submit">
</form>
</body>

</html>

关于javascript - 在提交之前验证表单数据,并基于验证使用 javascript 调用另一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43822426/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com