7.4 Javascript:表单验证-揭开正则表达式的面纱

Posted WeAreZero

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了7.4 Javascript:表单验证-揭开正则表达式的面纱相关的知识,希望对你有一定的参考价值。

用元字符匹配相应的字符类型

创建正则表达式有点像创建字符串字面量,只不过正则表达式出现在一对”/”里
正则表达式中会用到一级元字符,用于连接字母与数字

  • “.” 匹配任何字符,除换行符外
  • “\\d”匹配任何数字字符
  • “\\w”匹配任何字母或数字字符
  • “\\s”匹配空格
  • “^”字符串需以模式起始
  • “$”字符串需以模式结束

元字符不只表示一个字面量字符,它乃是用于构建正则表达式的符号


例:这里有三个字符
“A”,”7”,”%”
/\\w/可以匹配”A”,”7”
/^\\d/可以匹配”7”
/\\d/可以匹配”7”
/./可以匹配”A”,”7”,”%”


但是包含多个字符的字符串怎么办?
“2nite”,”007”,”catch22”,
/^\\d/可匹配到”2nite”,”007”(开头都是数字)
/\\d\\d\\d/可匹配”007”(一行中有3个数字)
/^cat/可匹配”catch22”(以cat字符开头)
/\\d\\d$/可匹配”catch22”(必须以两个数字来结尾)


例如:匹配美国邮编,邮编格式为#####-####
/^\\d\\d\\d\\d\\d-\\d\\d\\d\\d$/


用限定符指定字符出现的次数

限定符用于控件子模式出现于正则表达式里的次数
限定符前为子模式,限定符即应用在子模式,并控制子模式出现在模式里的次数

  • “*”限定符前的子模式必须出现0次或多次
  • “+”限定符前的子模式必须出现1次或多次
  • “?”限定符前的子模式必须出现0次或1次
  • “n”限定符前的子模式必须恰好出现N次
  • “()”集合字符或/和元字符,成为子模式

同样是以邮政编码为例
/^\\d5-\\d4$/
可以看出,加上限定符的表达式比只有元字符的表达式更加的精准
/\\w*/匹配任何字母数字字符,包括空字符串
/.+/匹配一个出现一次以上的字符串(用于匹配非非空的字符串)
/(Hot)??Donuts/可匹配出Hot或Donuts


*在正则表达式里想要匹配具有特殊意义的字符的时候,可以用反斜杠
例如匹配$:\\$*


利用正则表达式验证数据
JavaScript里的正则表达式由RegExp对象表示,其中包含使用正则表达式验证数据的关键–test()方法,它检查字符串里是否存在指定的模式


例:
var regex=/^\\d5$/;//匹配5位数邮政编码的正则表达式;
正则表达式对象字面量自动合建RegExp对象

if(!regex.test(inputFiled.value))

//在正则表达式上调用text方法
//如果符合合正则表达式的要求,返回true
//如果不符合正则表达式的要求,返回false


代码案例

接下来,写一个专门用来验证字符串格式的方法

//regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
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)//先检查参数是非空的
    
        return false;
        
    return validateRegExp(/^\\d2\\/\\d2\\/\\d4$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
    

以上是关于7.4 Javascript:表单验证-揭开正则表达式的面纱的主要内容,如果未能解决你的问题,请参考以下文章

javascript:正则表达式一个表单验证的例子

JavaScript表单验证和正则表达式

JavaScript ---[表单验证,正则表达式]

JavaScript 表单验证正则表达式大全

JavaScript表单通过正则表达式验证电话号码

JavaScript---通过正则表达式验证表单输入