Polymer Gold 电话输入

17 Mar 2025 | 阅读 2 分钟

Polymer gold-phone-input 元素是一个简单的文本字段，用于指定电话号码。它的样式采用 Material Design。

语法

<gold-phone-input></gold-phone-input>
The gold-phone-input element has an optional label, which is "phone number" by default: 
<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 属性使输入自动验证。

示例

运行以下命令以在项目目录中安装 gold-phone-input 元素。之后，您可以在您的应用程序中使用此元素

它将在 bower_components 文件夹下安装 polymer_gold-phone-input 的所有相关元素。

创建一个 index.html 文件，并在其中添加以下代码，以查看 Polymer.js 中 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>

输出