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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
Cannot modify header information错误解决方法
2008/10/08 PHP
php购物车实现代码
2011/10/10 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
班级出游活动计划书
2014/08/15 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
员工安全责任协议书
2016/03/22 职场文书
家电创业计划书
2019/08/05 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
总结Python常用的魔法方法
2021/05/25 Python
一级电子管军用接收机测评
2022/04/05 无线电
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL