html5+JavaScript进行邮箱地址验证-H5教程-PHP中文网

html5+JavaScript进行邮箱地址验证

巴扎黑

发布： 2017-03-19 14:44:00

原创

3257人浏览过

<!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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9221">
                            <img src="https://img.php.cn/upload/webcode/000/000/004/175836240640976.jpg" alt="GNCMS可视化拖拽公司网站模板1.0.0">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9221">GNCMS可视化拖拽公司网站模板1.0.0</a>
                            <p>高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。 模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="GNCMS可视化拖拽公司网站模板1.0.0">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9221" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="GNCMS可视化拖拽公司网站模板1.0.0">
                        </a>
                    </div>
                
  </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>

登录后复制

以上就是 html5+JavaScript进行邮箱地址验证的详细内容，更多请关注php中文网其它相关文章！