HTML javascript表单-还有什么其他方法可以通过表单验证来编写此javascript函数

我已经编写了下面的代码来获取要在页面上显示的表单数据。我还可以使用哪些方法来重写下面的代码以包括表单验证。我是javascript的初学者，只需要一些指导或代码片段来提供帮助。

JSFiddle链接：https://jsfiddle.net/jphfzgdq/

<head>
<script type="text/javascript">
function collect(frm) { 
document.getElementById("results").innerHTML+="Name: "+frm.nm.value+"<br>Age: "+frm.ag.value+"<hr>"
frm.reset();
} 
</script>
<style>
/* #entries,#results{float:left} */
</style> 
</head>
<body>
<div id="entries">
<form name ="myform">
Enter name: <input type="text" name="nm"/><br>
Enter age: <input type="text" name="ag"/><br>
<input type="button" value="display" onclick="collect(this.form)"/>
</form>
</div>
<div id="results"></div>
</body>

我想这就是您对的要求

<head>
<script type="text/javascript">
var totalAge = 0;

function collect(frm) { 
var name = frm.nm.value;
var age = parseInt(frm.ag.value);

totalAge += age;

try {
if (name == "" || name == null) {
alert('Enter your name');
} 
else if (age == "" || age == null || age == NaN) {
alert('Enter a valid age');
}
else {
document.getElementById("results").innerHTML+="Name: "+ name +"<br>Age: "+ age + "<br>total age: "+ totalAge +"<hr>"
frm.reset();
}
}
catch (e) {
console.log(e);
}

} 
</script>
<style>
/* #entries,#results{float:left} */
</style> 
</head>
<body>
<div id="entries">
<form name ="myform">
Enter name: <input type="text" name="nm"/><br>
Enter age: <input type="number" name="ag"/><br>
<input type="button" value="display" onclick="collect(this.form)"/>
</form>
</div>
<div id="results"></div>

</body>

我刚刚做了一个简单的年龄验证。

function collect(frm) {
if (Number(frm.ag.value) >= 18) {
document.getElementById("results").innerHTML +=
"Name: " + frm.nm.value + "<br>Age: " + frm.ag.value + "<hr>";
document.getElementById("warn").textContent = "";
frm.reset();
} else {
document.getElementById("warn").textContent =
"18+ Are only allowed!";
}
}

#warn {
color: red;
}

<div id="entries">
<form name="myform">
Enter name: <input type="text" name="nm" /><br> Enter age: <input type="number" name="ag" /><br>
<input type="button" value="display" onclick="collect(this.form)" />
</form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>

编辑：

你做这件事的方式不恰当，所以试着让它变得更好。

const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const btnInput = document.getElementById("btnInput");
const results = document.getElementById("results");
const warn = document.getElementById("warn");
const ageCounter = document.getElementById("totalAgeCounter");
let ageCount = 0;
function collectData() {
if (nameInput.value !== "" && Number(ageInput.value) >= 18) {
results.innerHTML += `Name: ${nameInput.value} <br>Age: ${ageInput.value} <hr>`;
ageCount += Number(ageInput.value);
ageCounter.textContent = ageCount;
warn.textContent = "";
nameInput.value = "";
ageInput.value = "";
} else {
warn.textContent = "18+ Are only allowed!";
}
}
btnInput.addEventListener("click", collectData);

#warn {
color: red;
}
#totalAgeCounter {
width: 50px;
height: 50px;
display: grid;
place-items: center;
background-color: blue;
position: absolute;
top: 20px;
right: 20px;
color: #fff;
border-radius: 50%;
font-weight: bolder;
font-size: 18px;
}

<div id="entries">
<form name="myform">
Enter name:
<input type="text" id="nameInput" />
<br /> Enter age:
<input type="number" id="ageInput" />
<br />
<input type="button" value="display" id="btnInput" />
</form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>
<div id="totalAgeCounter"></div>

相关内容

最新更新

热门标签：