1、效果展示


2、问题描述

当用户在输入框输入邮箱后、点击验证邮箱按钮。系统给出提示信息。

3、代码实现

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<body>

		<script type="text/javascript">

			window.onload=function(){

				var check=document.getElementById("btn").onclick=function(){

					var email=document.getElementById("email").value;//获取输入的字符串

					var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//验证邮箱的正则表达式

					var ok=emailRegExp.test(email);//验证是否符合要求

					if(ok){

						document.getElementById("erroremail").innerText="输入的格式符合要求";

					}else{

						document.getElementById("erroremail").innerText="输入的格式不符合要求！！！";

					}

				}

				document.getElementById("email").onfocus=function(){

					document.getElementById("erroremail").innerText="";

				}

			}

		</script>

		<input type="text" id="email" />

		<span id="erroremail" style=" font: 12px; color: red;"></span>

		<br />

		<input type="button" value="验证邮箱" id="btn" />

	</body>

</html>

js中通过正则表达式验证邮箱是否合法的更多相关文章

  1. Android中利用正则表达式验证手机号是否合法

    利用正则表达式来验证手机号是否合法,现在我们简单使用一下,这个在实际的应用中很实用. 例:在输入框中输入手机号,判断是否合法, MainActivity中: package com.example.m ...

  2. js如何使用正则表达式验证电话号码（可选区号）和邮箱？（分步骤）

    js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤) 一.总结 js进阶正则表达式16电话号码和邮箱正则(分类解决邮箱验证)(分组加?解决电话号码区号选择问题)([\w\.-]中括号解决邮 ...

  3. web开发常用的js验证,利用正则表达式验证邮箱、手机、身份证等输入

    正则表达式验证 //邮箱 \-])+\.)+([a-zA-Z0-]{,})+$/; email = document.getElementById("email").value; ...

  4. favicon.ico应用与正则表达式验证邮箱（可自动删除前后的空格）

    1.favicon.ico制作:favicon.ico可以ps制作;“shortcut icon”中间有一个空格 <head> <link rel="shortcut ic ...

  5. JavaScript -- 时光流逝（六）：js中的正则表达式 -- RegExp 对象

    JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义      查找以八进制数 规定的字符.     查找以十六进制数 规定 ...

  6. JS中应用正则表达式转换大小写

    JS中应用正则表达式转换大小写,代码很简单,看代码: 以下首字母大写,其它字母小写 <script type="text/javascript"> function r ...

  7. 如何在JS中应用正则表达式

    背景:在之前的随笔中写过C#中如何使用正则表达式,这篇随笔主要讲如何在js中应用正则表达式 如下代码: $("#zhengze").click(function () { var ...

  8. 面试题 正则表达式 验证邮箱 Pattern.matches

    故事背景 今天面试遇到这道题,对正则表达式还是有些懵,面试完回家复盘实现一下.这里使用到了 Pattern 这个类来校验正则表达式. 正则表示式分析: ^([a-z0-9A-Z]+[-|\\.]?)+ ...

  9. vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）

    文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...

随机推荐

  1. v-model原理问题

    v-model的原理 很多同学在理解Vue的时候都把Vue的数据响应原理理解为双向绑定,但实际上这是不准确的,我们之前提到的数据响应,都是通过数据的改变去驱动DOM重新的变化,而双向绑定已有数据驱动D ...

  2. Apache DolphinScheduler ASF 孵化器毕业一周年，汇报来了！

    不知不觉,Apache DolphinScheduler 已经从 Apache 软件基金会(以下简称 ASF)孵化器毕业一年啦! 北京时间 2021 年 4 月 9 日,ASF 官方宣布 Apache ...

  3. Luogu3594 [POI2015]WIL-Wilcze doły （双端队列）

    单调性显然,双端队列队列维护严格单调递减手写双端队列真的可恶. #include <iostream> #include <cstdio> #include <cstri ...

  4. Seatunnel超高性能分布式数据集成平台使用体会

    @ 目录 概述 定义 使用场景 特点 工作流程 连接器 转换 为何选择SeaTunnel 安装 下载 配置文件 部署模式 入门示例 启动脚本 配置文件使用参数示例 Kafka进Kafka出的ETL示例 ...

  5. Html飞机大战(二):面向对象绘制背景

    好家伙, 我们为了后续工作的顺利进行,我试着把每一个模块封装为对象 但冻手之前还是要构思一下 我们把天空封装成一个类: 1.来搞一手简单的对象分析:  属性方面的都好理解 来说明一下方法: (1) p ...

  6. KingbaseES 的 Lateral 连接

    一.什么是 Lateral 连接 根据文档,它的作用是: LATERAL 关键字可以位于子 SELECT FROM 项之前.这允许子 SELECT 引用 FROM 列表中出现在它之前的 FROM 项的 ...

  7. lombok Builder注解

    使用了@Builder 将会失去无参构造函数 可以通过 @Tolerate 来添加构造函数

  8. docker-compose概述--翻译

    Overview of Docker Compose 译文 Docker Compose 是一个用来定义和执行多Docker容器程序的工具,如果使用Compose,你将可以使用一个YAML文件来配置你 ...

  9. Python数据科学手册-Numpy数组的排序

    1)  Numpy中的快速排序: np.sort  和 np.argsort np.sort 是快速排序,算法复杂度 O[ N log N] ,也可以选择归并排序和堆排序 如果不想修改原始输入数组,返 ...

  10. 微服务系列之授权认证(三) JWT

    1.JWT简介 官方定义:JWT是JSON Web Token的缩写,JSON Web Token是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,可以将各方之间的信息作为JSON ...