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 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
js实现选项卡效果
Mar 07 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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 XML操作类DOMDocument
2009/12/16 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP分页类集锦
2014/11/18 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python正则表达式使用经典实例
2016/06/21 Python
python函数与方法的区别总结
2019/06/23 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python多进程使用函数封装实例
2020/05/02 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
百年校庆节目主持词
2014/03/27 职场文书
幼儿园运动会口号
2014/06/07 职场文书
学校教师安全责任书
2014/07/23 职场文书
尊师重教演讲稿
2014/09/04 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
三八妇女节标语
2014/10/09 职场文书
何玥事迹观后感
2015/06/16 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
Opencv实现二维直方图的计算及绘制
2021/07/21 Python