① 判断 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. 使用jquery制作可视化的组织结构

    组织结构是做项目里面经常用到的,但是要做成可视化的效果比较少,多数使用树结构来表示,但是对于客户来说不是太直观.可以用jOrgChart来实现.如下图的效果,这样就比较直观. 首先你要去下载jOrgC ...

  2. JavaScript开发中的一些问题

    1.求y和z的值是多少? <script type=”text/javascript”> var x = 1; var y = 0; var z = 0; function add(n){ ...

  3. Android：dimen尺寸资源文件的使用

    dimen.xml在values文件夹下面 <resources> <!-- Default screen margins, per the Android Design guide ...

  4. C++程序设计课程学习的网址

    很详细 C++程序设计课程主页  http://blog.csdn.net/sxhelijian/article/details/7910565 孙鑫C++视频教程 rmvb格式 全20CD完整版  ...

  5. LR结构图

  6. 使用iterator出现的死循环

    public static void main(String[] args) { List<String> list = new ArrayList<String>(); li ...

  7. python+pygame游戏开发之使用Py2exe打包游戏

    最近在用python+pygame 开发游戏,写完以后在分享给朋友玩的时候遇到了很大的问题,只有搭建了环境才能运行python脚本. 这会吓退99%以上的人……所以把我们的游戏打包(注意是打包而不是编 ...

  8. BZOJ3839 : [Pa2013]Działka

    对于每个询问,首先可以通过扫描线+线段树求出四个方向的第一个点,询问范围等价于框住这些点的最小矩形. 对于一个点$i$,预处理出: $A[i][j]$:$i$往左下角按凸壳走到$j$时,凸壳上相邻两点 ...

  9. BZOJ3789 : 扫雪车

    有上下界的网络流 T向S连容量为正无穷的边,将有源汇转化为无源汇 每条边容量减去下界,设in[i]表示流入i的下界之和减去流出i的下界之和 新建超级源汇SS,TT 对于in[i]>0的点,SS向 ...

  10. Designing CSS Layouts With Flexbox Is As Easy As Pie

    This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Sm ...