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 相关文章推荐
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
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
一个改进的UBB类
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python线程池threadpool使用篇
2018/04/27 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python aiohttp的使用详解
2019/06/20 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
毕业生自荐书
2014/02/02 职场文书
股权转让意向书
2014/04/01 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
教师节校长致辞
2015/07/31 职场文书
母亲节主题班会
2015/08/14 职场文书