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 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
微信小程序登录session的使用
Mar 17 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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中对数据库操作的封装
2006/10/09 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python素数筛选法浅析
2018/03/19 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python实现合并两个排序的链表
2019/03/03 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
微电影大赛策划方案
2014/06/05 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
行政前台岗位职责
2015/04/16 职场文书
我是特种兵观后感
2015/06/11 职场文书
新学期开学标语2015
2015/07/16 职场文书
2016寒假假期总结
2015/10/10 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书