Polymerjs gold-phone-input元素 _Polymerjs元素

金色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 = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.min.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/gold-phone-input/gold-phone-input.html"> < /head> < body> < h3> Pre-validated Us number< /h3> < gold-phone-inputlabel = "Valid"value = "http://www.srcmini.com/358-101-5422"auto-validatestyle = "width:35%; display:inline-block; "> < /gold-phone-input> < br/> < gold-phone-inputlabel = "Invalid"value = "http://www.srcmini.com/358-101-542"auto-validatestyle = "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>

【Polymerjs gold-phone-input元素】输出