angular2--input框验证手机号 只能输入数字并且不能超过11位数

第一种：

html

maxlength为限制输入框输入的最长长度，因为我这里对input做了一些空格加入，所以变成13，要是你们不做分隔，写11就行

<input type="text" id="name" maxlength="13" placeholder="请输入手机号码" (keyup)='onPhoneup($event)' (keypress)='onPhonepress($event)' />

ts:

export class XXX {public phoneNumber: any = '';//字符分隔onPhoneup(event) {let input = event.target;let value = input.value.replace(/[^0-9]/ig, '');var arr = value.split('');if (arr.length >= 4) {arr.splice(3, 0, ' ');}if (arr.length >= 9) {arr.splice(8, 0, ' ');}input.value = arr.join('');// 输完11位之后let phone = event.target.value.replace(/\s+/g, '');this.phoneNumber = phone;}onPhonepress(event) {// 判断是否为数字let inputStr = String.fromCharCode(event.keyCode);let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字if(!re.test(inputStr)) {return false;}}}

第二种：

<input type="tel" [(ngModel)]="phoneNumber" maxlength="11" placeholder="请输入手机号" (keypress)='onPhonepress($event)' />//(ngModelChange)="test($event)" 这个属性可以在用户输入数值时调用一个方法，可以不用onPhonepress，或者onKeyUp了

export class XXX {public phoneNumber: any = ''; //双向绑定直接就可以获取输入的值了onPhonepress(event) {// 判断是否为数字let inputStr = String.fromCharCode(event.keyCode);let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字if(!re.test(inputStr)) {return false;}}}