JavaScript 邮箱验证 - 正则验证

Mazey 2021-02-23 15:54:41
javascript 验证 正则 邮箱


一、RegExp

1.1 创建 RegExp 对象

new RegExp("必选,正则表达式","可选,匹配模式g,i,m")

1.2 RegExp 对象的方法

  • test:检索字符串中的指定值,返回 TrueFalse
  • exec:检索字符串中的指定值,返回找到的值,没有则 null
  • complie:用于改变正则表达式,或增删匹配模式。

1.2.1 test()

var r1 = new RegExp('world');
console.log(r1.test('Hello, world!')); //true
console.log(r1.test('Hello, World!')); //false
var r2 = new RegExp('world', 'i'); //大小写不敏感
console.log(r2.test('Hello, World!')); //true
var r3 = new RegExp(/world/i); //简写
console.log(r3.test('Hello, World!')); //true

1.2.2 exec()

var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world', 'i'); //大小写不敏感
console.log(r2.exec('Hello, World!')); //['world']
var r3 = new RegExp(/world/i); //简写
console.log(r3.exec('Hello, World!')); //['world']
var r4 = new RegExp('o');
console.log(r4.exec('Hello, World!')); //['o']
var r5 = new RegExp('o', 'gi');
console.log(r5.exec('Hello, WOrld!')); //['o']
console.log(r5.lastIndex); //5 匹配文本的第一个字符的位置,o为4,下一个位置为5
console.log(r5.exec('Hello, WOrld!')); //['O'] 匹配完第一个o后调用继续匹配
console.log(r5.lastIndex); //9
console.log(r5.exec('Hello, WOrld!')); //null 匹配不到返回null
console.log(r5.lastIndex); //0 lastIndex重置为0

1.2.3 complie()

var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
r1.compile('o');
console.log(r1.exec('Hello, World!')); //['o']
r1.compile('m');
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world');
console.log(r2.test('Hello, world!')); //true
r2.compile('mazey');
console.log(r2.test('Hello, world!')); //false

二、正则表达式

  • ^$:表示匹配值的开始和结尾。
  • +1+,一个或更多。
  • *0 / +,零个或更多。
  • ?0 / 1,零个或一个。
  • {1,2}:1 <= length <= 2,长度。
  • ():表示一个表达式的组。
  • []:匹配的字符范围,我理解为一个块,很多块放在一个组 () 里面。

三、示例

<form action="">
输入:
<input type="text" name="mazey" id="mazey" placeholder="请输入邮箱">
<input type="button" value="验证" onclick="check();">
</form>
<script>
function check(){
var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
var obj = document.getElementById("mazey"); //要验证的对象
if(obj.value === ""){ //输入不能为空
alert("输入不能为空!");
return false;
}else if(!reg.test(obj.value)){ //正则验证不通过,格式不对
alert("验证不通过!");
return false;
}else{
alert("通过!");
return true;
}
}
</script>

附录

阅读原文:https://blog.mazey.net/589.html

版权声明
本文为[Mazey]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039262619

  1. Redis 日志篇:系统高可用的杀手锏
  2. Java中把一个对象的值复制给另外一个对象引发的思考
  3. Java serialization / call wildfly service interface exception: ejbclient000409
  4. Docker compose deploy stack
  5. Mac下查看已安装的jdk版本及其安装目录
  6. Redis log: the killer of system high availability
  7. mybatis映射xml配置文件报错:<statement> or DELIMITER expected, got ‘id‘
  8. Thinking about copying the value of one object to another in Java
  9. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  10. vue使用sdk进行七牛云上传
  11. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  12. Spring原来还可以这么玩!阿里新产Spring全线宝典成功颠覆了我对Spring的认知!
  13. View the installed JDK version and its installation directory under mac
  14. Error in mybatis mapping XML configuration file: < statement > or delay expected, got 'ID‘
  15. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  16. Javascript性能优化【内联缓存】 V8引擎特性
  17. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  18. Vue uses SDK to upload Qi Niu cloud
  19. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  20. 深入理解 Web 协议 (三):HTTP 2
  21. Spring can still play like this! Ali's new spring product has successfully overturned my understanding of spring!
  22. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  23. JavaScript performance optimization [inline cache] V8 engine features
  24. linux 配置java环境
  25. linux find 查找文件
  26. 深入理解 Web 协议 (三):HTTP 2
  27. IntelliJ IDEA 相关问题记录
  28. Deep understanding of Web protocol (3): http 2
  29. 深入理解 Web 协议 (三):HTTP 2
  30. 腾讯IEG开源AI SDK:自动化测试吃鸡、MOBA类游戏
  31. Mysql Command
  32. Configuring Java environment with Linux
  33. Find files in Linux
  34. docker-Dockerfile 创建镜像
  35. Redis Cluster
  36. 深入理解 Web 协议 (三):HTTP 2
  37. JavaScriptBOM操作
  38. JavaScriptBOM操作
  39. Deep understanding of Web protocol (3): http 2
  40. Record of IntelliJ idea related problems
  41. Deep understanding of Web protocol (3): http 2
  42. Tencent IEG open source AI SDK: automatic testing of chicken eating and MoBa games
  43. Mysql Command
  44. Docker dockerfile create image
  45. Redis Cluster
  46. 死磕Spring之IoC篇 - 文章导读
  47. Deep understanding of Web protocol (3): http 2
  48. JavaScript BOM operation
  49. JavaScript BOM operation
  50. 死磕Spring之IoC篇 - 文章导读
  51. k8s node 操作与维护
  52. k8s 证书更新
  53. 【Java面试题第三期】JVM中哪些地方会出现内存溢出?出现的原因是什么?
  54. HashMap连环问你能答出几道?
  55. k8s-cronjob
  56. k8s-cert
  57. Spring: an introduction to IOC
  58. Spring: an introduction to IOC
  59. Operation and maintenance of k8s node
  60. K8s certificate update