正则表达式初识及简单的案例应用

正则表达式

正则表达式首先是一个表达式，有一定的规则，也叫规则表达式
按照一定的规则来匹配字符串的这样的表达式，叫做正则表达式
正则表达式是由好多的符号组成的
作用：匹配字符串
正则表达式的符号----元字符，分为限定符

正则表达式的是应用之一是验证表单元素

元字符：
. 除了以外任意一个单个字符串

[ ]表示的是范围或干掉原有正则符号的意义

[0-9] 0到9之间任意一个数字，包括0和9

[a-z] a-z任意一个小写字母
[A-Z] 大写字母

[0-9a-zA-Z] 所有字母和数字中的一个

[0-9]{2} {}这个特殊符号前面表达式出现的次数
[0-9]{1,2} 大括号前面表达式出现最少1次最多2次
[a-z]{0,1} 大括号前面表达式出现0-1次

{0,1} 前面的表达式出现最少0次最多1次同?
{1,} 前面表达式出现最少1次，最多无限次同+
{0,} 前面表达式出现最少0次，最多无限次同*

? 前面的表达式出现0到1次
+ 前面表达式出现1到无限次
* 前面表达式出现到无限次

| 或者的意思优先级最低

() 小括号提升优先级作用：分组从最左边开始算起

d 数字中的一个
D 非数字 [^0-9]非数字
dD

s 空白符
S 非空白符

w 非特殊字符 _属于非特殊字符
W 特殊字符

^ 以什么开始^[fw1] 或取反 [^a1d223] [^0-9]非数字 D
$ 以什么结束[0-9][a-z]$

^[0-9]{2,4}$-----严格匹配

[*]---干掉原有正则符号*的意义

单词的边界 "what are you doing"--->what

案例1：利用正则表达式验证座机号码

请输入座机号：<input type="text" value="" id="txt">

<script>
   my$("txt").onblur = function () {
       var reg = /^[0-9]{3,4}[-][0-9]{7,8}$/;
       if (reg.test(this.value)) {
           this.style.backgroundColor = "gray";
       }
       else {
           this.style.backgroundColor = "red";
       }
   }
</script>

案例2：利用正则表达式验证邮箱输入形式是否正确<body>

请输入您的邮箱：<input type="text" value="" id="txt"/>
<script>
    my$("txt").onblur = function () {
        var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z]+([.][a-zA-Z]+){1,2}$/;
        if (reg.test(this.value)) {
            this.style.backgroundColor = "gray";
        }
        else {
            this.style.backgroundColor = "red";
        }
    };
</script>

案例3：用正则表达式验证注册表单

<div class="container" id="dv">
    <label>Q Q</label><input type="text" id="qq"><span></span><br/>
    <label>手机</label><input type="text" id="phone"><span></span><br/>
    <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
    <label>座机</label><input type="text" id="telephone"><span></span><br/>
    <label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script>
    function checkInput(element,reg) {
        element.onblur = function () {
            if (reg.test(this.value)) {
                this.nextElementSibling.innerHTML = "ok";
                this.nextElementSibling.style.color = "green";
            }
            else {
                this.nextElementSibling.innerHTML = "It's wrong!";
                this.nextElementSibling.style.color = "red";
            }
        };
    }
    var reg1 = /^d{6,12}$/;
    checkInput(my$("qq"),reg1);
    checkInput(my$("phone"),/^d{11}$/);
    checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9A-Za-z]+([.][a-zA-Z]+){1,2}$/);
    checkInput(my$("telephone"),/^[0-9]{3,4}[-][0-9]{7,8}$/);
    checkInput(my$("fullName"),/^[u4E00-u9FA5]{2,6}$/);
</script>