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 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
python实现在windows下操作word的方法
2015/04/28 Python
tensorflow获取变量维度信息
2018/03/10 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
本科毕业生求职自荐信
2014/02/03 职场文书
化学教学随笔感言
2014/02/19 职场文书
九一八事变演讲稿
2014/09/05 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android