angular2项目里使用正则表达式

2024-06-22 06:44:41

先踩坑

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

我们学习正则表达式时，一般这样使用

var phone = document.getElementById('phone').value;
if(!(/^1[3456789]\d{9}$/.test(phone))){ alert("手机号码有误，请重填");  return false; }

使用test()方法
但这样在angular2项目里使用，会有这样几个问题

1、问题1：text()方法报错

2、问题2：提示不存在text()方法

原始方法在这里行不通，因此，我们要换个方法

match()匹配

match本身是JavaScript语言中字符串对象的一个方法，该方法的签名是

match([string] | [RegExp])

它的参数既可以是一个字符串，也可以是一个正则表达式。我们这里使用正则表达式

上述问题的正确写法：

const regex = '^((13[0-9])|(14[1]|[4-9])|(15([0-3]|[5-9]))|(16[2]|[5-7])|(17[0-3]|[5-8])|(18[0-9])|(19[1|8|9]))\\d{8}$';
this.person.phone = String(this.person.phone);
if (this.person.phone.length !== 11) {this.msg.error('手机号应为11位数');return false;
} else {const isMatch = this.person.phone.match(regex);console.log(isMatch);if (!isMatch) {this.msg.error('请填入正确的手机号');return false;}return true;
}

返回值问题。

我们必须明确的是，这个方法跟其他语言是不同的。JavaScript中的match()方法的返回值是数组或者是null。如果原字符串中匹配到了正则表达式指代的子串，则返回一个数组，否则返回null。

1、数组

我们可以看到，match()的结果是一个数组，该数组主要有4项。

第0项：匹配到字符串

groups：undefined，这表示当前的正则表达式没使用分组

index： index表示首次匹配上的子串的起始下标。

input：表示源字符串

length：表示匹配到的结果长度（本应该时11的啊！不知道为什么我这里是10）

2、null

结果：

angular2项目里使用正则表达式相关推荐

angular2+onsenui--怎么在angular2项目里引入onsenui框架
在angular2项目里安装onsenui框架,这里使用npm命令. 一.在目录下,shift+鼠标右键–在此处打开命令窗口键入命令:npm install onsenui ngx-onsenui ...
angular2项目里使用 Spin(加载中)
何时使用页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑. 效果 ng-zorro官方链接:https://ng.ant.design/components/spin/z ...
Angular2项目中浏览器拦截弹出窗口的解决方法
Angular2项目中浏览器拦截弹出窗口的解决方法为什么把项目是Angular2的放到了前边? 因为正常也页面网上已经很多解决方案.请自行百度或Google. 现象:当window.open为用户触 ...
在Eclipse中的Android项目里实现代码复用
引言开发时通常都会有多个项目间代码复用的需求,这时通常的做法是设置项目依赖,让一个项目引用另一个项目,比如在Visual Studio中这样就很容易实现. 而在Eclipse中的Android项目里 ...
制药行业SAP项目里的那些MES系统
制药行业SAP项目里的那些MES系统最近十年,笔者参与过制药行业的几个SAP实施项目.这些项目的客户都是世界500强里知名的制药行业跨国企业,这些SAP项目都是客户的欧美总部将其全球模板推广到中国的 ...
制药行业SAP项目里的那些LIMS系统
制药行业SAP项目里的那些LIMS系统最近十年,笔者参与过制药行业的5个SAP实施项目.这些项目的客户都是世界500强里知名的制药行业跨国企业,这些SAP项目都是客户的欧美总部将其全球模板推广到中国 ...
SAP项目里的关键用户，兼职还是专职？
SAP项目里的关键用户,兼职还是专职? 每个SAP实施项目,都是相关企业里的一件大事.SAP项目牵涉到企业的所有最核心的业务部门,比如财务部门,供应链部门(采购,仓库和销售),生产部门,工程设施部门, ...
SAP MM 有了采购订单历史的PO行项目里的采购附加费不允许再改了？
SAP MM 有了采购订单历史的PO行项目里的采购附加费不允许再改了? 正确答案是: 不允许,这是SAP标准逻辑. 那么问题来了!今日收到业务人员报说采购订单4300013979,完成了收货和IV, ...
SAP MM Overall Level 审批的采购申请中行项目里的成本中心必须是同一个！
SAP MM Overall Level 审批的采购申请中行项目里的成本中心必须是同一个! 如下采购申请,系统找不到release strategy, 2个行项目中,cost center分别是463 ...

最新文章

热门文章