js中通过正则表达式验证邮箱是否合法
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中通过正则表达式验证邮箱是否合法的更多相关文章
- Android中利用正则表达式验证手机号是否合法
利用正则表达式来验证手机号是否合法,现在我们简单使用一下,这个在实际的应用中很实用. 例:在输入框中输入手机号,判断是否合法, MainActivity中: package com.example.m ...
- js如何使用正则表达式验证电话号码（可选区号）和邮箱？（分步骤）
js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤) 一.总结 js进阶正则表达式16电话号码和邮箱正则(分类解决邮箱验证)(分组加?解决电话号码区号选择问题)([\w\.-]中括号解决邮 ...
- web开发常用的js验证,利用正则表达式验证邮箱、手机、身份证等输入
正则表达式验证 //邮箱 \-])+\.)+([a-zA-Z0-]{,})+$/; email = document.getElementById("email").value; ...
- favicon.ico应用与正则表达式验证邮箱（可自动删除前后的空格）
1.favicon.ico制作:favicon.ico可以ps制作;“shortcut icon”中间有一个空格 <head> <link rel="shortcut ic ...
- JavaScript -- 时光流逝（六）：js中的正则表达式 -- RegExp 对象
JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义 查找以八进制数 规定的字符. 查找以十六进制数 规定 ...
- JS中应用正则表达式转换大小写
JS中应用正则表达式转换大小写,代码很简单,看代码: 以下首字母大写,其它字母小写 <script type="text/javascript"> function r ...
- 如何在JS中应用正则表达式
背景:在之前的随笔中写过C#中如何使用正则表达式,这篇随笔主要讲如何在js中应用正则表达式 如下代码: $("#zhengze").click(function () { var ...
- 面试题 正则表达式 验证邮箱 Pattern.matches
故事背景 今天面试遇到这道题,对正则表达式还是有些懵,面试完回家复盘实现一下.这里使用到了 Pattern 这个类来校验正则表达式. 正则表示式分析: ^([a-z0-9A-Z]+[-|\\.]?)+ ...
- vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）
文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...
随机推荐
- C++11实现可变参数泛型抽象工厂
- Apache DolphinScheduler 1.2.1 发布说明
Apache DolphinScheduler 于2020年2月24日正式发布 1.2.1 版,发布内容如下: 新特性: [#1497] 通过 API 创建的工作流在前端展示时自动调整布局. [#74 ...
- Docker 03 镜像命令
参考源 https://www.bilibili.com/video/BV1og4y1q7M4?spm_id_from=333.999.0.0 https://www.bilibili.com/vid ...
- MyBatis-Plus（二、常用注解）
1.@TableName @TableName 用法:映射数据库的表名,如果数据库表名与实体类名不一致,用@TableName来映射. package com.example.mybatisplus. ...
- Host long.com not found: 2(SERVFAIL)
环境: centos 7.9 地址:192.168.200.100 相关配置 name.conf文件: named.zones文件: 正反解析文件: 重启DNS服务: 1 [root@server ...
- 盘点Vue2和Vue3的10种组件通信方式(值得收藏)
Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式.其中将要实现的通信 ...
- C++ 添加程序图标到我的电脑
C++ 像我的电脑中 百度网盘的 那图标快捷方式.如何生成的呢?设置程序图标到我的电脑 请看下边代码 就ok了(*^__^*) 嘻嘻-- 类似下图: 大家如果看我下边的不是很清楚,可以下载这个具体工程 ...
- C++ 性能小测 1 二维数组的遍历效率
C++ 性能小测 1 二维数组的遍历效率 遍历二维数组时,常规思路是使用一个嵌套循环.一方面,由于 CPU 使用了分支预测技术,因此通常将循环次数最多循环的放在最内层.另一方面,由于二维数组是按行存储 ...
- 面试突击78：@Autowired 和 @Resource 有什么区别？
@Autowired 和 @Resource 都是 Spring/Spring Boot 项目中,用来进行依赖注入的注解.它们都提供了将依赖对象注入到当前对象的功能,但二者却有众多不同,并且这也是常见 ...
- 究竟什么是Shadow DOM？
shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...