使用JavaScript进行表单验证总是如此
添加了一些更多的文本，因为stackoverflow说有太多的代码
HTML
<form name="contact">
<fieldset>
<label class="labelone" for="naam">Naam:</label>
<input name="naam">
<label for="email">Email:</label>
<input name="email">
<label for="boodschap">Boodschap:</label>
<textarea name="boodschap"></textarea>
</fieldset>
<fieldset>
<input class="btn" type="button" onClick="valideren()" value="Verzenden" />
<div id="resultaat"></div>
</fieldset>
</form>
JAVASCRIPT
function valideren() {
if (document.getElementsByName('naam').value != '' && document.getElementsByName('email').value != '' && document.getElementsByName('boodschap').value != '') {
document.getElementById('resultaat').innerHTML = "De e-mail werd verstuurd";
} else {
document.getElementById('resultaat').innerHTML = "Gelieve alle velden in te vullen!";
}
}
为什么这总是回归真实？
提前致谢！
斯泰恩
如果你在这里阅读，你会看到document.getElementsByName返回一个NodeList ，而不是一个Node 。
点击进行实况演示
var naam = document.getElementsByName('naam')[0].value,
email = document.getElementsByName('email')[0].value,
boodschap = document.getElementsByName('boodschap')[0].value,
target = document.getElementById('resultaat');
现在：
if (naam.length && email.length && boodschap.length) {
target.innerHTML += "valid";
} else {
target.innerHTML += "invalid";
};
考虑关于如何更好地设计代码风格的问题更新和其他信息。 这是一个可能的解决方案。
HTML
<form name="contact">
<fieldset>
<label class="labelone" for="naam">Naam:</label>
<input name="naam">
<label for="email">Email:</label>
<input name="email">
<label for="boodschap">Boodschap:</label>
<textarea name="boodschap"></textarea>
</fieldset>
<fieldset>
<input id="validateButton" class="btn" type="button" value="Verzenden" />
<div id="resultaat"></div>
</fieldset>
</form>
使用Javascript
function valideren() {
var form = this.parentNode.parentNode,
resultaat = document.getElementById('resultaat');
if (form.naam.value !== '' && form.email.value !== '' && form.boodschap.value !== '') {
resultaat.textContent = "De e-mail werd verstuurd";
} else {
resultaat.textContent = "Gelieve alle velden in te vullen!";
}
}
document.getElementById('validateButton').addEventListener("click", valideren, false);
在jsfiddle上
我在按钮中添加了一个“id”，以方便在jsfiddle中定位，当然您可以使用其他方法在DOM中找到它。
一些参考资料。
的document.getElementById
document.getElementsByName
HTML中的id和name属性之间的区别
为什么在HTML中使用onClick（）是一种不好的做法？
不显眼的JavaScript
链接地址: http://www.djcxy.com/p/88057.html