JS库函数~正则表达式及表单、ip验证实例

本文内容:

1.什么是正则表达式?

2.正则表达式限定符、选择匹配符、字符匹配符

3.常用的正则表达式

4.创建RegExp对象实例的两种方式

5.String对象与正则表达式

6.使用正则表达式验证表单实例、验证ip实例

-- 什么是正则表达式?

正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。

-- 限定符

(1){n,}:规定前面的元素或组合项至少出现n次。

(2){n,m}:规定前面的元素或组合项至少连续出现n次,至多连续出现m次,其中n≤m,逗号和数字之间不能有空格。

(3)+:规定前面的元素或组合项必须出现一次或连续出现多次,等效于{1,}。

(4)*:规定前面的元素或组合项可以出现零次或连续多次,等效于{0,}。

(5)?:规定前面的元素或组合项出现零次或一次,等效于{0,1}。

-- 选择匹配符

选择匹配符有且仅有一个,即“|”字符,用于选择匹配两个选项之中的任意一个(就是没我们所理解的“或”)。

-- 字符匹配符

(1)[…]:匹配方括号中包含的字符集中的任意一个字符。例如,正则表达式“[abc]”,字符“a”、“b”、“c”都可以与之匹配。

(2)[…]:匹配方括号中未包含的任何字符。例如,正则表达式“[ab]”,除了字符“a”、“b”之外,其他的任何字符都可以与之匹配。

(3)[a-z],[1-9]:匹配指定范围内的任何字符。

(4)[a-z],[1-9]:匹配不在指定的范围内的任何字符。

(5)\d:匹配任意一个数字字符,等效于[0-9]。

(6)\D:匹配任意一个非数字字符,等效于[^0-9]。

(7)\s:匹配任何空白字符,包括空格、制表符等。

(8)\S:匹配任何非空白字符。

(9)\w:匹配任何英文字母、数字和下划线,等效于[A-Za-z0-9_]。

(10)\W:匹配任何非英文字母和数字类字符,但不包括下划线,等效于[^A-Za-z0-9_]。

(11).:匹配除换行符\n之外的任何单字符。

-- 常用正则表达式

1.匹配身份证号码:\d{15}$|\d{18}$

2.邮箱:^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$;

3.中国的邮政编码:^\d{6}$

4.匹配字符串中的中文字符:[\u4e00-\u9fa5]

5.验证5到12位的qq号:^\d{5,12}$

-- RegExp对象

  • 创建RegExp对象实例的两种方式

(1)构造函数方式

var reg=new RegExp(“表达式”,“附加参数”);

(2)普通方式

var reg=/表达式/附加参数

附加参数是可选的,用来扩展正则表达式的含义,主要有三个参数:

(1)g:全局匹配。

(2)i:用作忽略大小写的参数。

(3)m:多行匹配。

  • test方法:

该方法检查一个字符串中是否存在创建RegExp对象实例时所指定的正则表达式模式,如果存在则返回true,否则返回false。

  • exec方法:

exec方法使用RegExp对象实例创建时指定的正则表达式模式搜索字符串,并返回一个包含搜索结果的数组。

-- String对象与正则表达式

  1. match方法

String对象的match方法作用与RegExp对象的exec方法类似,它使用正则表达式模式对字符串进行搜索,并返回一个包含搜索结果的数组,传递给match方法的参数是一个RegExp对象实例,即使用正则表达式作为match方法的参数去搜索字符串;而传递给exec方法的参数是一个String类型的对象实例,即使用正则表达式对象去搜索作为exec方法参数的字符串。

语法:array=stringObj.match(regExpObject);

示例:

type="text/javascript">

var str="This is a dog,that is a cat";

var regExp=/th[a-z]{2}/gi;

var arr=str.match(regExp);

document.write(arr);

说明:

(1)正则表达式/th[a-z]{2}/gi的作用是全局匹配以th开头的4个字符,i表示不区分大小写。

(2)match()方法使用正则表达式模式对字符串进行搜索,如果在字符串中没有搜索到匹配正则表达式模式的内容,则此方法返回值是null。

  1. search方法

search方法利用使用正则表达式搜索,返回的是第一个匹配到的字符串在整个被搜索的字符串中的位置。如果没有找到匹配的子串则返回-1。如果是简单的搜索,可以用String对象的indexOf()方法。但对于较为复杂的模式匹配则需要使用search()方法。

语法:index=stringObj.search(regExpObject);

  1. replace方法

replace方法使用正则表达式模式对字符串执行搜索,并对搜索到的内容用指定的字符串替换,返回值为包含替换后的内容的字符串对象。

语法:var newStr= stringObj.replace(regExpObject);

示例:

function checkInfo(){

var str=document.getElementById("info").value;

var regExp=/[\. ]/g;

document.getElementById("info").value=str.replace(regExp,"");

}

说明:

(1)参数g用于全局替换,即所有找到的匹配都将被替换。

(2)在正则表达式中,“.”是元字符,匹配除换行符“\n”之外的任何单字符,若要匹配“.”字符本身,需要使用“.”。

-- 使用正则表达式验证表单实例

1.form表单:

<form action="#" method="post" onsubmit="return check()">
            <table border="0" cellspacing="" cellpadding="">
                <tr>
                    <td class="t1">用户名:</td>
                    <td ><input type="text" id="name" onblur="checkName(this)"/></td>
                    <td class="t2">由英文字母和数字组成的4-16位字符,以字母开头</td>
                </tr>
                <tr>
                    <td class="t1">昵称:</td>
                    <td><input type="text" id="nicheng" onblur="checkNicheng(this)" /></td>
                    <td class="t2">由2-6个汉字组成</td>
                </tr>
                <tr>
                    <td class="t1">邮箱:</td>
                    <td><input type="text" id="email" onblur="checkEmail(this)"/></td>
                    <td class="t2">邮箱账号@域名,如:good@tom.com. whj@sina.com.cn</td>
                </tr>
                <tr>
                    <td class="t1">密码:</td>
                    <td><input type="password" id="password" onblur="checkPwd(this)" /></td>
                    <td class="t2">由英文字母和数字组成的4-10位字符</td>
                </tr>
                <tr>
                    <td class="t1">确认密码:</td>
                    <td ><input type="password" id="password1" onblur="SurePWD(this)" /></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="t1">手机号码:</td>
                    <td><input type="text" id="phone" onblur="checkPhone(this)" /></td>
                    <td class="t2">手机号由11位数字组成,且以13、15、18开头</td>
                </tr>
                <tr>
                    <td class="t1">出生日期:</td>
                    <td><input type="datetime" id="birdate" onblur="checkBirDate(this)"/></td>
                    <td class="t2">出生日期在1900-2009之间,如:1985-3-1或1985-03-01</td>
                </tr>
                <tr>
                    <td colspan="3"><button type="submit">提交</button></td>
                </tr>
            </table>
            </form>

2.js验证:

function checkName(obj){
                var name=document.getElementById("name").value;
                var nameRegExp=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
                if(!nameRegExp.test(name)){
                    alert("错误,英文字母和数字组成的4-16位字符,以字母开头");
                    return false;
                }
                obj.parentNode.parentNode.lastElementChild.style.color="blue";
                return true;
            }
            function checkNicheng(obj){
                var nicheng=document.getElementById("nicheng").value;
                var nichengRebExp=/^['\u4e00-\u9fa5']{2,6}$/;
                if(!nichengRebExp.test(nicheng)){
                    alert("错误,由2-6个汉字组成");
                    return false;
                }
                obj.parentNode.parentNode.lastElementChild.style.color="blue";
                return true;
            }
            function checkEmail(obj){
                var email=document.getElementById("email").value;
                var emailRegExp=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
                if(!emailRegExp.test(email)){
                    alert("错误,邮箱账号@域名");
                    return false;
                }
                obj.parentNode.parentNode.lastElementChild.style.color="blue";
                return true;
            }
            function checkPwd(obj){
                var pwd=document.getElementById("password").value;
                var pwdRegExp=/^[a-zA-Z0-9]{4,10}$/;
                if(!pwdRegExp.test(pwd)){
                    alert("错误,由英文字母和数字组成的4-10位字符");
                    return false;
                }
                obj.parentNode.parentNode.lastElementChild.style.color="blue";
                return true;
            }
            function SurePWD(obj){
                var pwd1=document.getElementById("password1").value;
                var pwd=document.getElementById("password").value;
                if(pwd1!=pwd){
                    alert("两次输入密码不一致!");
                    return false;
                }
                obj.parentNode.parentNode.lastElementChild.innerHTML="密码一致";
                return true;
            }
            function checkPhone(obj){
                var phone=document.getElementById("phone").value;
                var phoneRegExp=/^(13|15|18)\d{9}$/;
                if(!phoneRegExp.test(phone)){
                    alert("错误,手机号由11位数字组成,且以13、15、18开头");
                    return false;
                }
                obj.parentNode.parentNode.lastElementChild.style.color="blue";
                return true;
            }
            function checkBirDate(obj){
                var date=document.getElementById("birdate").value;
                var dateRegExp=/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
                if(!dateRegExp.test(date)){
                    alert("错误,出生日期在1900-2009之间,如:1985-3-1或1985-03-01");
                    return false;
                }
                obj.parentNode.parentNode.lastElementChild.style.color="blue";
                return true;
            

-- ip验证实例:

1.输入框:

输入IP地址:<input type="text" id="ip" onblur="checkIp()"/>

2.js验证:

function checkIp(){
                var ip=document.getElementById("ip").value;
                //var ipRegExp=/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
                var ipRegExp=/^((25[0-5]|2[0-4]\d|1?\d?\d)\.){3}(25[0-5]|2[0-4]\d|1?\d?\d)$/;
                if(!ipRegExp.test(ip)){
                    alert("ip输入错误!");
                    return false;
                }
                alert("输入正确!");
                    return true;
            }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,783评论 5 472
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,396评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,834评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,036评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,035评论 5 362
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,242评论 1 278
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,727评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,376评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,508评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,415评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,463评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,140评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,734评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,809评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,028评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,521评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,119评论 2 341

推荐阅读更多精彩内容