Javascript的表單驗(yàn)證-揭開正則表達(dá)式的面紗

字號(hào):


    用元字符匹配相應(yīng)的字符類型
    創(chuàng)建正則表達(dá)式有點(diǎn)像創(chuàng)建字符串字面量,只不過正則表達(dá)式出現(xiàn)在一對(duì)”/”里
    正則表達(dá)式中會(huì)用到一級(jí)元字符,用于連接字母與數(shù)字
    “.” 匹配任何字符,除換行符外
    “\d”匹配任何數(shù)字字符
    “\w”匹配任何字母或數(shù)字字符
    “\s”匹配空格
    “^”字符串需以模式起始
    “$”字符串需以模式結(jié)束
    元字符不只表示一個(gè)字面量字符,它乃是用于構(gòu)建正則表達(dá)式的符號(hào)
    例:這里有三個(gè)字符
    “A”,”7”,”%”
    /\w/可以匹配”A”,”7”
    /^\d/可以匹配”7”
    /\d/可以匹配”7”
    /./可以匹配”A”,”7”,”%”
    但是包含多個(gè)字符的字符串怎么辦?
    “2nite”,”007”,”catch22”,
    /^\d/可匹配到”2nite”,”007”(開頭都是數(shù)字)
    /\d\d\d/可匹配”007”(一行中有3個(gè)數(shù)字)
    /^cat/可匹配”catch22”(以cat字符開頭)
    /\d\d$/可匹配”catch22”(必須以兩個(gè)數(shù)字來結(jié)尾)
    例如:匹配美國(guó)郵編,郵編格式為#####-####
    /^\d\d\d\d\d-\d\d\d\d$/
    用限定符指定字符出現(xiàn)的次數(shù)
    限定符用于控件子模式出現(xiàn)于正則表達(dá)式里的次數(shù)
    限定符前為子模式,限定符即應(yīng)用在子模式,并控制子模式出現(xiàn)在模式里的次數(shù)
    “*”限定符前的子模式必須出現(xiàn)0次或多次
    “+”限定符前的子模式必須出現(xiàn)1次或多次
    “?”限定符前的子模式必須出現(xiàn)0次或1次
    “{n}”限定符前的子模式必須恰好出現(xiàn)N次
    “()”集合字符或/和元字符,成為子模式
    同樣是以郵政編碼為例
    /^\d{5}-\d{4}$/
    可以看出,加上限定符的表達(dá)式比只有元字符的表達(dá)式更加的精準(zhǔn)
    /\w*/匹配任何字母數(shù)字字符,包括空字符串
    /.+/匹配一個(gè)出現(xiàn)一次以上的字符串(用于匹配非非空的字符串)
    /(Hot)??Donuts/可匹配出Hot或Donuts
    *在正則表達(dá)式里想要匹配具有特殊意義的字符的時(shí)候,可以用反斜杠
    例如匹配$:\$*
    利用正則表達(dá)式驗(yàn)證數(shù)據(jù)
    JavaScript里的正則表達(dá)式由RegExp對(duì)象表示,其中包含使用正則表達(dá)式驗(yàn)證數(shù)據(jù)的關(guān)鍵–test()方法,它檢查字符串里是否存在指定的模式
    例:
    代碼如下:
    var regex=/^\d{5}$/;//匹配5位數(shù)郵政編碼的正則表達(dá)式;
    正則表達(dá)式對(duì)象字面量自動(dòng)合建RegExp對(duì)象
    if(!regex.test(inputFiled.value))
    {
    //在正則表達(dá)式上調(diào)用text方法
    //如果符合合正則表達(dá)式的要求,返回true
    //如果不符合正則表達(dá)式的要求,返回false
    }
    代碼案例
    接下來,寫一個(gè)專門用來驗(yàn)證字符串格式的方法
    //regex正則表達(dá)式
    //inputStr需要驗(yàn)證的字符串
    //helpText提供信息提示的一個(gè)span標(biāo)簽
    //helpMessage提示信息內(nèi)容
    //
    function validateRegExp(regex,inputStr,helpText,helpMessage)
    {
    if(!regex.test(inputStr))
    {
    if(helpText!=null)
    helpText.innerHTML=helpMessage;
    return false;
    }
    else{
    if(helpText!=null)
    helpText.innerHTML="";
    }
    return true;
    }
    function validateDate(inputFild,helpText)
    {
    if(!validateNonEmpty(inputFild,helpText)//先檢查參數(shù)是非空的
    {
    return false;
    }
    return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"請(qǐng)輸入正確的日期格式");//調(diào)用正則驗(yàn)證方法
    }
    好了,本文到此結(jié)束