美文网首页
JS库函数~正则表达式及表单、ip验证实例

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

作者: 追寻未来的小Y | 来源:发表于2017-09-06 23:56 被阅读0次

    本文内容:

    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;
                }
    

    相关文章

      网友评论

          本文标题:JS库函数~正则表达式及表单、ip验证实例

          本文链接:https://www.haomeiwen.com/subject/golbjxtx.html