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 面向对象特性
Dec 28 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
详解vue axios二次封装
Jul 22 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
antd form表单数据回显操作
Nov 02 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python简单验证码识别的实现方法
2019/05/10 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
美国钻石商店:Zales
2016/11/20 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
住宅质量保证书
2014/04/29 职场文书
代理人委托书
2014/08/01 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
新党章的学习心得体会
2014/11/07 职场文书
企业法律事务工作总结
2015/08/11 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python