JavaScript中的E-mail 地址格式验证


Posted in Javascript onMarch 28, 2018

最近做了一个前端的项目,要求:输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号。

1:代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用JavaScript验证是否符合电子邮箱地址</title>
</head>
<script type="text/javascript">
  // 创建第一个函数validate_emil()并包含两个参数
  function validate_email(field, alerttxt) {
    with (field) {
      //利用indexOf() 方法返回某个指定的字符串值在字符串中首次出现的位置--定义一个变量apos将第一次出现的“@”赋值给apos
      apos = value.indexOf("@");
      //利用lastIndexOf() 方法返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索--
      //stringObject.lastIndexOf(searchvalue,fromindex)
      //fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。
      dotpos = value.lastIndexOf(".");
      // 判断符合"@"的位置,或者"."的位置是否在"@"的后面
      if (apos < 1 || dotpos - apos < 2) {
        // 利用alert()弹出一个警告窗来执行alerttxt的操作
        // 邮箱地址不符合
        alert(alerttxt);
        return false;
      } else {
        // 邮箱地址符合
        return true;
      }
    }
  }
  // 创建第二个函数validate_form()并包含一个参数
  function validate_form(thisform) {
    with (thisform) {
      if (validate_email(email, "Not a valid e-mail address!") == false) {
        // 利用focus()将输入焦点移至对象上
        email.focus();
        return false;
      }
    }
  }
</script>
<body>
  <!-- onsubmit是一个验证表单功能,为true提交, -->
  <form action="submitpage.htm" onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit">
  </form>
</body>
</html>

2:结果

JavaScript中的E-mail 地址格式验证 

 下图则说明了自己输入的邮箱格式是准确的,至于存在不存在另当别论!

JavaScript中的E-mail 地址格式验证

总结

以上所述是小编给大家介绍的JavaScript中的E-mail 地址格式验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
javascript性能优化之分时函数的介绍
Mar 28 #Javascript
Vue数据监听方法watch的使用
Mar 28 #Javascript
Vue 自定义动态组件实例详解
Mar 28 #Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 #Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
理解javascript封装
2016/02/23 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python实现两张图片的像素融合
2019/02/23 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
便利店投资的创业计划书
2014/01/12 职场文书
文化宣传方案
2014/03/13 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Win11软件图标固定到任务栏
2022/04/19 数码科技
PHP 时间处理类Carbon
2022/05/20 PHP