PHP前端开发

html5+JavaScript进行邮箱地址验证

百变鹏仔 3个月前 (10-18) #H5教程
文章标签 邮箱地址

<!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: &#39;be not a legal email address&#39;,  url: &#39;be not a valid web address&#39;,  comment: &#39;ye have to specify ye value&#39;};var forms = document.getelementsbytagname(&#39;form&#39;), 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(&#39;form&#39;)[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(&#39;error with &#39; + el.name + (el.validationmessage ? &#39;: &#39; + el.validationmessage: &#39;&#39;));        cont = false;      }    }  }    if (errors.length) {    // replace alert with your sexy css教程 info bubbles    alert(errors.join(&#39;n&#39;));  }  return cont;};</script></body></html>