聚合物 - 黄金电话输入

<gold-phone-input>元素是一个简单的文本字段，特别适用于电话号码，采用 Material Design 的样式。

语法

<gold-phone-input></gold-phone-input>

此元素具有一个可选标签，默认情况下为“电话号码”，如下所示 −

<gold-phone-input label = "Your phone number"></gold-phone-input>

验证

电话号码的验证根据模式 XXX-XXXXXXX 进行，其中 “X” 是一个数字，而 “-” 是一个分隔符。默认情况下，该电话号码将被视为美国电话号码。要使用不同的号码模式，请使用属性 country-code 和 phone-number-pattern，如下面代码所示。

<gold-phone-input 
   country-code = "354"
   phone-number-pattern = "XX-XX-XX-XX-X">
</gold-phone-input>

要手动验证，可以使用 validate() 方法，如果有效则返回 true，否则返回 false。使用 auto-validate 和 required 属性会导致自动验证输入。

样式

要设置此元素的样式，请参阅 Polymer.PaperInputContainer，以获取自定义属性列表。

示例

要使用 gold-phone-input 元素，请导航到命令提示符中的项目文件夹并使用以下命令。

bower install PolymerElements/gold-phone-input --save

上述命令会将 gold-phone-input 元素安装在 bower_components 文件夹中。接下来，使用以下命令在 index.html 中导入 gold-phone-input 文件。

<link rel = "import" href = "/bower_components/gold-phone-input/gold-phone-input.html">

以下程序演示了 gold-phone-input 元素的使用。

<!DOCTYPE html>
<html>
   <head>
      <title>Gold Phone Input</title>
      <meta charset = "utf-8">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/gold-phone-input/gold-phone-input.html">
   </head>

   <body>
      <h3>Pre-validated Us number</h3>
      <gold-phone-input
         label = "Valid"
         value = "358-101-5422"
         auto-validate  
         style = "width:35%; display:inline-block;">
      </gold-phone-input><br/>
	
      <gold-phone-input
         label = "Invalid"
         value = "358-101-542"
         auto-validate   
         style = "width:35%; display:inline-block;">
      </gold-phone-input>	<br/>
	
      <h3>Displayes error message<h3>
      <gold-phone-input 
         label = "Enter the phone number" 
         auto-validate 
         error-message = "Please enter the valid US number" 
         style = "width:35%; display:inline-block;">
      </gold-phone-input>	
   </body>
</html>

输出

要运行该应用程序，请导航到项目目录并运行以下命令。

polymer serve

现在，打开浏览器并导航到 http://127.0.0.1:8081/。下面是输出。

polymer_elements.htm

打印页面