① 判断 String 是否符合正则要求

patt.test(String);

【例】表单提交:

a.用户名不能为空,只能是数字及字母,6-11位

b.email 不能为空且格式正确

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:400px;
height:400px;
border:0;
border-collapse: collapse;
background:orange;
} td{
border: 1px solid gray;
cursor:pointer;
}
</style>
</head>
<body>
<form action="">
<p>用户名:<input type="text" name="username" id=""></p>
<p>Email:<input type="text" name="email" id=""></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
<script>
document.getElementsByTagName("form")[0].onsubmit = function(){
var patt = /^[a-zA-Z0-9]{6,11}$/;
if(!patt.test(document.getElementsByName("username")[0].value)){
alert("用户名只能是6-11位数字及字母组成");
return false;
} patt = /^[a-zA-Z0-9\.-]+@\w+(\.\w+)+$/; //域名不能有_,可以有-
if(!patt.test(document.getElementsByName("email")[0].value)){
alert("邮箱错误");
return false;
}
}
</script>
</html>

注意:js 正则表达式 // 外面不要加单引号,这点与 php 不同。

② 找出字符串中符合正则的子串

patt.exec(String);

【例】查出含有邮箱的人,给这些人的名字标红

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:400px;
height:400px;
border:0;
border-collapse: collapse;
background:orange;
} td{
border: 1px solid gray;
cursor:pointer;
}
</style>
</head>
<body>
<input type="button" value="标红有邮箱的人">
<ul>
<li>袁绍</li>
<li>曹操</li>
<li>孙坚&lt;sunjian@changsha.com&gt;</li>
<li>董卓&lt;dongzhuo@xiliang.com&gt;</li>
</ul>
</body>
<script>
function find(){
var lis = document.getElementsByTagName("li");
var i = 0;
var patt = /[a-zA-Z0-9\.-]+@\w+(\.\w+)+/;
while(i < lis.length){
if(null !== patt.exec(lis[i].innerHTML)){ //exec 匹配到值时返回匹配到的值,否则返回null
lis[i].style.color = "red";
}
i += 1; //建议使用 i += 1 代替 i ++
}
} document.getElementsByTagName("input")[0].onclick = find;
</script>
</html>

Javascript 笔记与总结(2-18)正则验证与正则匹配的更多相关文章

  1. 9月26日JavaScript表单验证、正则表达

    一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. <body> & ...

  2. JavaScript正则验证邮箱

    正则表达式/^正则$/.test() <html> <head> <title>JavaScript</title> <meta charset= ...

  3. [javascript] test() 方法进行正则验证

    test() 方法用于检测一个字符串是否匹配某个模式 最近遇到的某业务中进行发票抬头的正则验证如下: console.log(/^[a-zA-Z\u4e00-\u9fa5\s()()<>& ...

  4. js正则表达式实现手机号码,密码正则验证

    手机号码,密码正则验证. 分享下javascript中正则表达式进行的格式验证,常用的有手机号码,密码等. /** * 手机号码 * 移动:134[0-8],135,136,137,138,139,1 ...

  5. 正则表达式控制Input输入内容 ,js正则验证方法大全

    https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...

  6. js正则验证数字的方法

    正则验证数字的方法: <script type="text/javascript"> function validate(){ var reg = new RegExp ...

  7. Javascript正则构造函数与正则表达字面量&&常用正则表达式

    本文不讨论正则表达式入门,即如何使用正则匹配.讨论的是两种创建正则表达式的优劣和一些细节,最后给出一些常用正则匹配表达式. Javascript中的正则表达式也是对象,我们可以使用两种方法创建正则表达 ...

  8. TP框架自带的正则验证的规则(转载)

    thinkphp框架里面自带有很多自动验证的规则,下面是框架自带的正则验证的规则,官方的说明文档里面没有这么多,所以记下来,以备使用. view sourceprint?01static $regex ...

  9. 手机号码js正则验证

    手机号码js正则验证 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if (!myreg.test($(" ...

随机推荐

  1. Android实现监测网络状态

    本文主要用到了安卓监测网络状态变化功能,实现了WIFI,3G,无网络状态切换时发出通知的功能. 主要知识点 service broadcast 接口回调实现 service的基本知识 service可 ...

  2. Ubuntu下VIM的安装和基本用法

    1.用root账户登录Ubuntu,命令行中输入vim,如果未安装会得到下面的提示: 程序“vim”已包含在下列软件包中:  * vim  * vim-gnome  * vim-tiny  * vim ...

  3. centos 截图命令 screenshot

    [root@ok ~]# gnome-screenshot#全屏截图 [root@ok ~]# gnome-screenshot --interactive#自定义截图

  4. JUC回顾之-Semaphore底层实现和原理

    1.控制并发线程数的Semaphore Semaphore(信号量)是用来控制同时访问特定资源的线程数量,它通过协调各个线程,保证合理的使用公共资源. 线程可以通过acquire()方法来获取信号量的 ...

  5. hdu 2184 01背包变形

    转自:http://blog.csdn.net/liuqiyao_01/article/details/8753686 题意:这是又是一道01背包的变体,题目要求选出一些牛,使smartness和fu ...

  6. cocos2dx游戏开发——微信打飞机学习笔记(七)——Enemy的搭建

    一.文件创建~ Enemy.h Enemy.cpp 二.How to do? 由于我是已经完成成个游戏的功能,所以我会将游戏中enemy所需要的很多功能基本上都先考虑到了,如果大家自己在做的时候也许没 ...

  7. android MVC

    Android 的官方建议应用程序的开发采用MVC 模式.何谓MVC? MVC 是Model,View,Controller 的缩写,从上图可以看出MVC 包含三个部分: 模型(Model)对象:是应 ...

  8. HttpURL

    * 步骤:     1. new一个URL对象     2. new一个HttpURLConnection对象     3. connection连接     4. getResponseCode() ...

  9. 【spring 区别】ClassXmlAplicationContext和FileSystemXmlApplicationContext的区别

    今天写一个简单的spring使用例子,遇到这个问题: 项目结构如下: 代码如下: package com.it.sxd; import java.nio.file.FileSystem; import ...

  10. Accumulators

    copy的官方programming guide的代码,只有一个要说一下,Accumulators的更新是在action做的,transformation操作中对于Accumulators的增加不会即 ...