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. ASP.NET Core 6框架揭秘实例演示[32]：错误页面的集中呈现方式

    由于ASP.NET是一个同时处理多个请求的Web应用框架,所以在处理某个请求过程中出现异常并不会导致整个应用的中止.出于安全方面的考量,为了避免敏感信息外泄,客户端在默认情况下并不会得到详细的出错信息 ...

  2. Apache DolphinScheduler 荣获国外知名媒体采访

    Apache DolphinScheduler 毕业的消息被北美科技媒体 TheNewStack 关注并邀请Apache DolphinScheduler PMC chair 代立冬 进行相关采访. ...

  3. Luogu P1903 [国家集训队]数颜色 / 维护队列 (带修莫队)

    #include <cstdio> #include <cstring> #include <iostream> #include <algorithm> ...

  4. identity4 系列————案例篇[三]

    前言 前文介绍了identity的用法,同时介绍了什么是identitySourece.apiSource.client 这几个概念,和具体案例,那么下面继续介绍案例了. 正文 这里用官网的案例,因为 ...

  5. React报错之Invalid hook call

    正文从这开始~ 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function compone ...

  6. KingbaseES 全局索引

    概述:在分区表上创建的索引可分为全局索引和本地索引.全局索引包括全局非分区索引(Global Nonpartitioned Indexes)和全局分区索引(Global Partitioned Ind ...

  7. WebDriver常见操作

    本文当个记录贴,记录WebDriver常用的一些函数(含自己封装的函数) 让WebDriver使用浏览器用户设置 1 option = webdriver.ChromeOptions() 2 opti ...

  8. Windows 10 Technical Preview 屏幕亮度

    下载了  Windows 10 Technical Preview 安装好之后都挺正常的,就是显卡驱动没有, 联上网络, 自动找到驱动,看起来一切都挺好的. 但是重启之后,屏幕就变得特别暗了, 亮 ...

  9. Java SE 16 record 类型说明与使用

    Java SE 16 record 类型说明与使用 作者:Grey 原文地址: 博客园:Java SE 16 record 类型说明与使用 CSDN:Java SE 16 record 类型说明与使用 ...

  10. Traefik 控制面板 SaaS 服务 Pilot

    文章转载自:https://mp.weixin.qq.com/s?__biz=MzU4MjQ0MTU4Ng==&mid=2247485572&idx=1&sn=8ffa2bc7 ...