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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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
mysql5详细安装教程
2007/01/15 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
深入理解javascript中的this
2021/02/08 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
python 类详解及简单实例
2017/03/24 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
wxpython布局的实现方法
2019/11/01 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
学生安全责任书范本
2014/07/24 职场文书
商场促销活动策划方案
2014/08/18 职场文书
2014年学校工作总结
2014/11/20 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
环保建议书作文400字
2015/09/14 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书