如何在离子2中创建电话号码验证？

Question

我想在ionic 2中创建一个电话号码验证，我找到了一个示例intlpnIonic，但它是在ionic 1中创建的。所以我想要下面的图像：

所以我的问题：如何创建像图像一样的手机验证？

Answer 1

您可以在此处查看的最佳方法

http://www.moodycoder.com/custom-validator-method/

您也可以查看以下代码

static isValidMobile(control: FormControl): any {

    let regExp = /^[0-9]{10}$/;

    if (!regExp.test(control.value)) {
        return {"invalidMobile": true};
    }
    return null;
}

它对我来说就像是一种魅力......

Answer 2

我使用了名为intl-tel-input的第三方库。

1-首先安装jQuery

npm install --save jquery

现在，在任何应用程序文件中导入jquery，如

import $ from "jquery"; 

它将使用like

$('#elemId').width();

2-安装intl-tel-input库

npm install intl-tel-input --save

现在，在任何应用程序文件中导入int-tel-input，如

import 'intl-tel-input';

并使用如下所示：

ngOnInit(): any {
    let telInput = $("#elemtId");
    let output = $("#output");

    telInput.intlTelInput();
    // listen to "keyup", but also "change" to update when the user selects a country
    telInput.on("keyup change", function() {
      var intlNumber = telInput.intlTelInput("getNumber");
      if (intlNumber) {
        output.text("International: " + intlNumber);
      } else {
        output.text("Please enter a number below");
      }
    });
  }

<强> home.html的

<p id="output">Please enter a number below</p>
<input id="elemtId" type="tel">

离子信息

您的系统信息：

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3 Build version 7D175