关于polymer原生组件paper-input的部分属性的使用心得

本次探究目标：使用原生的组件输入校验时使用自己定义的校验方法：

question:在使用原生组件的一些属性如验证的属性validator的时候没有起效。具体如下

相关的url：

https://elements.polymer-project.org/elements/paper-input

https://github.com/Polymer/polymer.git

探究的属性：validator 、 auto-validate

分析原因：之前validator一直没有使用自定义的标签。是在参考了letters-only之后才把paper-input的自定义

要使自定义的方法生效有一下几个需要设置的地方

1、在需要验证的地方使用属性
引用属性方法自定义的html页面对应的paper-input中添加属性
auto-validate validator="only-love"
2、在当前验证的输入框页面添加(目的是加载当前页面的时候去解析验证方法对应的html标签，使里面的方法能使用)
<only-love></only-love>
**前面两步在同一页面中处理如下**
<!--加载资源文件-->
<link rel="import" href="../../o-resource.html"/>
<link rel="import" href="/bower_components/paper-input/test/paper-input.html"/>
<link rel="import" href="/bower_components/paper-input/test/only-love.html">
<!--这里的id和下面的is属性的值要保持一致，最好也和html文件的名字保持一直。表示的是html标签的名字。-->
<dom-module id="login-page">
<style></style>
<template>
<only-love></only-love>
<paper-input label="this input requires only love" auto-validate validator="only-love" error-message="letters only!"></paper-input>
<paper-input label="无效的输入框：沒有写自定义验证标签" auto-validate validator="onlylove" error-message="letters only!"></paper-input>
<paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
<paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
<paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
</template>
</dom-module>
<script>
Polymer({
is: 'login-page',
properties: {}
}
)
</script>
***********************************************

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-validator-behavior/iron-validator-behavior.html">
<script>
Polymer({

is: 'only-love',

behaviors: [
Polymer.IronValidatorBehavior
],

validate: function(value) {
alert("only-love")
return !value || value.match(/^[a-zA-Z]*$/) !== null;
}

});
</script>

这次的问题解决方式也很简单，

但是对于以后其他官网api中的属性和方法有了一定的认识，在以后使用原生api的时候能减少不必要的碰壁，

目前有很多自己没使用到过的标签，但是不代表这些标签没用或者不好，这次更让我感受到一些被我忽略的广泛标签的强大

也能更多的去发挥原生标签的作用，

Q&A

下面是一些参考页面

由于本人水平有限，对于polymer的了解不够深入，所以有很多遗漏或者是说错了的地方，欢迎评论指点