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 相关文章推荐
动态加载JS文件的三种方法
Nov 08 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP可变函数学习小结
2015/11/29 PHP
php文件缓存方法总结
2016/03/16 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python PyInstaller安装和使用教程详解
2020/01/08 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python IDLE添加行号显示教程
2020/04/25 Python
用python写爬虫简单吗
2020/07/28 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
信息技术国培研修日志
2015/11/13 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
高一数学教学反思
2016/02/18 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS