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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
JS实现横向跑马灯效果代码
Apr 20 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
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
javascript动态加载二
2012/08/22 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
python实现图片转字符小工具
2019/04/30 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python中time、datetime模块的使用
2020/12/14 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
环境建设实施方案
2014/03/14 职场文书
计算机求职信
2014/07/02 职场文书
贷款承诺书
2015/01/20 职场文书