<!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 messages var 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>
Das obige ist der detaillierte Inhalt vonHTML5+JavaScript zur Überprüfung der E-Mail-Adresse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!