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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
用js实现in_array的方法
Nov 05 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Vue-component全局注册实例
Sep 06 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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中的boolean(布尔)类型详解
2013/10/28 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python实现FTP文件传输的实例
2019/07/07 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
个人素质的自我评价分享
2013/12/16 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
优秀员工推荐信
2014/05/10 职场文书
党员转正大会主持词
2015/07/02 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技