srcmini金色Polymerjs 电话输入元素是一个简单的文本字段, 用于指定电话号码。在材料设计中设置样式。
句法：
<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”是数字, “-“是分隔符。默认情况下, 它指定一个美国电话号码。要使用不同的数字模式, 请使用如下所示的国家/地区代码和电话号码-模式属性：
<gold-phone-input
country-code = "354"
phone-number-pattern = "XX-XX-XX-XX-X">
</gold-phone-input>validate()方法用于手动验证电话号码。如果有效, 则返回true, 否则返回false。你可以使用自动验证和必需属性来使输入自动验证。
例子
运行以下命令以在项目目录中安装gold-phone-input元素。之后, 你可以在应用程序中使用此元素：
bower install PolymerElements/gold-phone-input -save
它将在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>输出
评论前必须登录！
注册