Home > Article > Web Front-end > html5+JavaScript for email address verification

html5+JavaScript for email address verification

巴扎黑Original: 2017-03-19 14:44:002941browse

<!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: &#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>

The above is the detailed content of html5+JavaScript for email address verification. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of HTML5 user and user group management commands under LinuxNext article：Detailed explanation of HTML5 user and user group management commands under Linux

See more

html5+JavaScript for email address verification

Related articles