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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
关于vue-router的那些事儿
May 23 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
简历自我评价模板
2015/03/11 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
入党群众意见范文
2015/06/02 职场文书
国庆阅兵观后感
2015/06/15 职场文书
新人入职感言
2015/07/31 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python