下面是一个使用一些方法是比联事件处理程序更现代的方法（例如，onchange=""）。这是由data-属性驱动的，因为你会看到，尽管它不是当前配置，现在来处理比其他input[type=text]任何东西，它可以扩大与select S，textarea S等
什么是工作下面对于IE8和更低版本并没有任何借口，因为这些版本使用attachEvent而不是addEventListener来设置事件处理程序。再说一遍，这可以起作用，但它在所有其他现代浏览器中都可以工作。它应该在IE9中工作，尽管这未经测试。
它可能看起来像很多事情，但看看它，看看你是否能解决它如何运作。随时问我你喜欢的任何问题，以及。
这里是（在铬和Firefox测试）一个小提琴：
http://jsfiddle.net/ndXTb/
HTML
<aside>
<ol id="errors"></ol>
</aside>
<section id="signup">
<form action="#">
<p>
<label for="fname">First Name:</label>
<span>
<input type="text" id="fname" name="fname" class="required"
data-validate-error="First name may not be empty."
data-error-sort="0"/>
</span>
</p>
<p>
<label for="lname">Last name:</label>
<span>
<input type="text" id="lname" name="lname" class="required"
data-validate-error="Last name may not be empty."
data-error-sort="1"/>
</span>
</p>
<p>
<label for="addr1">Address 1:</label>
<span>
<input type="text" id="addr1" name="addr1" class="required"
data-validate-error="Address may not be empty."
data-error-sort="2"/>
</span>
</p>
<p>
<label for="addr2">Address 2:</label>
<span><input type="text" id="addr2" name="addr2"/></span>
</p>
<p>
<label for="city">City:</label>
<span>
<input type="text" id="city" name="city" class="required"
data-validate-error="City may not be empty."
data-error-sort="3"/>
</span>
</p>
<p>
<label for="state">State:</label>
<span>
<input type="text" id="state" name="state" class="required"
data-validate-error="State may not be empty."
data-error-sort="4"/>
</span>
</p>
<p>
<span></span>
<span style="text-align: right;">
<input type="submit" value="Submit"/>
</span>
</p>
</form>
</section>
CSS
#signup {
display: table;
}
#signup form > p {
display: table-row;
}
#signup p > label,
#signup p > span {
display: table-cell;
font-weight: bold;
padding: 5px;
}
#signup p > label {
text-align: right;
width: 150px;
}
.validationerror input {
border: 1px solid #a00;
background-color: #ffd;
padding: 2px 1px;
}
.validationerror:after {
content: '!';
}
的Javascript
window.addEventListener('load', function init(){
var signup = document.getElementById('signup'),
fields = signup.getElementsByClassName('required'),
errors = document.getElementById('errors'),
error = '<li>{error}</li>',
submitted = false,
errorlog = [],
index = 0,
field,
focusin;
signup.addEventListener('submit', validateform);
while (field = fields[index++]) {
field.addEventListener('blur', validatefield);
field.addEventListener('keyup', validatefield);
}
function validatefield() {
var message = this.dataset['validateError'],
sort = this.dataset['errorSort'],
parent = this.parentNode;
if (this.value === '' && (message && sort)) {
errorlog[sort] = error.replace('{error}', message);
parent.className += ' validationerror';
if (!focusin) {
focusin = this;
}
} else if (this.value !== '' && (message && sort)) {
delete errorlog[sort];
parent.className = parent.className.replace('validationerror', '');
if (focusin == this) {
focusin = null;
}
}
if (!submitted) {
isvalid();
}
}
function validateform(event) {
index = 0;
errorlog = [];
focusin = null;
submitted = true;
while (field = fields[index++]) {
callevt(field, 'focus');
callevt(field, 'blur');
}
submitted = false;
if (!isvalid()) {
if (focusin) {
focusin.focus();
}
focusin = null;
event.preventDefault();
return false;
}
}
function isvalid() {
errors.innerHTML = '';
if (errorlog.length) {
errors.innerHTML = errorlog.join('');
return false;
}
return true;
}
function callevt(el, type) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(type, true, true);
el.dispatchEvent(evt);
}
});
这里有一个[有些复杂的例子（http://jsfiddle.net/userdude/CMmDF/）（使用jQuery），但如果你看看事件处理和函数被调用上'submit'，或多或少你只需要将你的消息部分放入一个函数中，这个函数可以在你的提交和验证函数结束时被调用，然后使用'blur'或'change'来激发事件每个必填字段。 – 2013-03-07 06:39:22
@Rachel看看我的回答我已经测试过它和它的工作，我甚至为你提供了jsfiddle .. – 2013-03-07 06:57:26