<!doctype html><html><head><meta charset=utf-8 /><title>html5 网页特效 邮箱地址验证</title><style>body, input, textarea { font-family: "helvetica", arial, helvetica;}label { display: block; float: left; clear: left; text-align: right; width: 100px; margin-right: 10px;}p { padding: 10px; }fieldset { border: 1px solid #ccc; margin-bottom: 20px; }</style></head><body><form> <fieldset> <legend>some bits about you</legend> <p><label for="email">email:</label> <input id="email" name="email" type="email" /></p> <p><label for="url">homepage:</label><input id="url" type="url" name="url" required /></p> <p><textarea name="comment" cols="100" rows="5" required></textarea></p> </fieldset> <input type="submit" /></form><script>// default validation messagesvar messages = { email: 'be not a legal email address', url: 'be not a valid web address', comment: 'ye have to specify ye value'};var forms = document.getelementsbytagname('form'), i = forms.length, j, el;while (i--) { j = forms[i].length; while (j--, el = forms[i][j]) { if (el.willvalidate && messages[el.name]) { el.setcustomvalidity(messages[el.name]); } }}</script><script>var form = document.getelementsbytagname('form')[0];form.onsubmit = function (event) { var i = this.length, el, cont = true, errors = []; while (i--, el = this[i]) { if (el.willvalidate) { if (!el.validity.valid) { errors.push('error with ' + el.name + (el.validationmessage ? ': ' + el.validationmessage: '')); cont = false; } } } if (errors.length) { // replace alert with your sexy css教程 info bubbles alert(errors.join('n')); } return cont;};</script></body></html>