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中的$.getJSON 使用说明
Mar 10 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
JavaScript实现优先级队列
Dec 06 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
VUE重点问题总结
2018/03/19 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python整数对象实现原理详解
2019/07/01 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python 写一个文件分发小程序
2020/12/05 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
优秀老员工获奖感言
2014/02/15 职场文书
统计系教授推荐信
2014/02/28 职场文书
超市开学活动方案
2014/03/01 职场文书
环保倡议书500字
2014/05/15 职场文书
教师节宣传方案
2014/05/23 职场文书
承诺书模板
2014/08/30 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
财务会计实训报告
2014/11/05 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
MySQL的存储过程和相关函数
2022/04/26 MySQL