<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function validate_email(field,text){
            with (field){
                // with就是类似C++的namespace，简单说就是命名空间，也就是说with的{}里面就不用再写 thisform.xxx 了，直接写 xxx就是意味着是thisform的
                //这里的value=field.value
                apos = value.indexOf("@");//获取“@”出现的位置
                dotpos = value.lastIndexOf(".");//获取“.”出现的位置
                if (apos<1||dotpos-apos<2){//做一个判断，输入的邮箱必须包含“@”符号和点号“.”同时“@”不可以是邮件地址的首字符，并且“@”之后需有至少一个“.”号：
                    alert(text);//如果条件成立，则弹出该提示框
                    return false;//这里的返回false,意味着严重失败
                }else{
                    alert("提交成功\n\n点击确定继续")//如果条件不成立，则弹出该提示框
                    return true;//意味着验证成功
                }
            }
        }
        function validate_form(thisform){//因为onsubmit里调用了validate_form(this)，这里的this就是指form本身，thisform接收的就是这个form也可以改成form
            with (thisform){
                // with就是类似C++的namespace，简单说就是命名空间，也就是说with的{}里面就不用再写 thisform.xxx 了，直接写 xxx就是意味着是thisform的
                //这里的email=thisform.email=form里name=email
                if(validate_email(email,"请输入正确的邮箱地址")==false){//调用 validate_required 参数是thisform下面的name=email的标签的引用，另外一个参数是个字符串
                    email.focus();//如果validate_email返回false，就把焦点设定到email上
                    return false;//这里的返回false，意味着验证失败，表单不会被提交
                }
            }
        }
    </script>
</head>

<body>
<form action="javascript:;" onsubmit="return validate_form(this)" method="post"><!--当提交表单时，先执行validate_form()。参数是该表单自己this-->
邮箱:<input type="text" id="email" name="email" size="50"/>
    <input type="submit" value="提交" id="submit"/>
</form>
</body>
</html>

javascript表单验证-邮箱验证的更多相关文章

  1. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  2. JavaScript表单验证和正则表达式

    JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...

  3. JavaScript表单验证年龄

    JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...

  4. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  5. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  6. JavaScript 表单验证入门

    JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...

  7. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  8. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  9. JavaScript 表单验证正则表达式大全

    JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[ ...

  10. 如何在.Net Core MVC中为动态表单开启客户端验证

    非Core中的请参照: MVC的验证 jquery.validate.unobtrusive mvc验证jquery.unobtrusive-ajax 参照向动态表单增加验证 页面引入相关JS: &l ...

随机推荐

  1. 大数据笔记07：大数据之Hadoop的HDFS（特点）

    1. HDFS的特点: (1)数据冗余,硬件容错 (2)流式的数据访问(写一次读多次,不能直接修改已写入的数据,只能删除之后再去写入) (3)存储大文件 2. HDFS适用性和局限性 适用性:(1)适 ...

  2. js上拉加载、下拉刷新的插件

    之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...

  3. git查看某个文件的修改历史

    <转自 http://www.cnblogs.com/flyme/archive/2011/11/28/2265899.html> 有时候在比对代码时,看到某些改动,但不清楚这个改动的作者 ...

  4. lucene实战（第二版）学习笔记

    初识Lucene 构建索引 为应用程序添加搜索功能 Lucene的分析过程

  5. Cookies欺骗分析与防护

    今天来谈谈cookies欺骗是怎么回事以及如何避免. 用户在登录之后通常会保存用户信息,以便在其他需要权限的页面去验证用户信息是否具有访问权限. 有同学说我在登录的时候已经很注意SQL注入问题了,还有 ...

  6. 返回到上一页的html代码的几种写法

    关键词:返回上一页 html代码超链接返回上一页代码: <a href=”#” onClick=”javascript :history.back(-1);”>返回上一页</a> ...

  7. 数据转换错误，java.lang.NumberFormatException: null

    今天写项目时报了一个数组转换错误的异常,让我找了半天5555 -_- . 一般出现这种错误呢,情况都是parseInt转换所触发的,像下面这行代码 int factorOneInt = Integer ...

  8. centos安装redis-3.2.3

    这次介绍的是在虚拟机centos下安装redis-3.2.3 首先进入官网http://redis.io/download

  9. Rand

    我看了下网上,是这样的:rand()随机产生一个数(0-65535),加上%后,就是对其它数求余,求余产生的数取决于求余的数.比如,rand()%20;意思是利用rand()的返回值(一个0-6553 ...

  10. UNIX时间戳及日期的转换与计算

    UNIX时间戳是保存日期和时间的一种紧凑简洁的方法,是大多数UNIX系统中保存当前日期和时间的一种方法,也是在大多数计算机语言中表示日期和时间的一种标准格式.以32位整数表示格林威治标准时间,例如,使 ...