介绍
@npm-polymer/iron-input 是一个 Polymer 元素，可以用于创建一个输入框，支持类型验证、自定义验证和错误提示等功能。此包应用广泛且适用性强，是前端开发必备之一。
安装
使用 npm 安装 @npm-polymer/iron-input：
npm install @npm-polymer/iron-input
使用 bower 安装 @npm-polymer/iron-input：
bower install @npm-polymer/iron-input
用法
引入
在 HTML 文件中引入 iron-input 元素：
-- -------------------- ---- -------
--------- -----
------
------
------- ------------- ------------------------------------------------------------------
-------
------
-------------------------
-------
-------基本使用
iron-input 包含一个可以输入文本的 input 元素。input 元素必须包含在 iron-input 元素的内部，并使用 slot="input" 插入。例如：
<iron-input> <input slot="input" type="text"> </iron-input>
这将创建一个包含一个可以输入文本的文本框的 iron-input 元素。
类型验证
iron-input 自带类型验证，可以指定输入框的类型，例如 email、number、password 等。当不符合指定类型时，会显示验证错误提示。例如：
<iron-input> <input slot="input" type="email"> </iron-input>
这将创建一个可以输入 email 的文本框的 iron-input 元素。
自定义验证
iron-input 还支持自定义验证。首先需要实现一个返回布尔值的验证函数，并使用 setCustomValidity() 方法将其绑定到输入框上。例如：
-- -------------------- ---- -------
------------
------ ---------- ------------ ------------
-------------
--------
----- --------- - -------------------------------------
----- ----- - ---------------------------------------------
------------------------------- -- -- -
-- ---------------------- -
----------------------------
- ---- -
-----------------------------------
-
---
-------- -------------- -
------ -------------------------
-
---------这将创建一个验证输入框值为大写字母的 iron-input 元素。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------- ------------- ------------------------------------------------------------------
-------
------
------------
------ ------------ ------------
-------------
------------
------ ------------ -------------
-------------
------------
------ ---------------- ------------ ------------
-------------
--------
----- --------- - -------------------------------------
----- ----- - ---------------------------------------------------
------------------------------- -- -- -
-- ---------------------- -
----------------------------
- ---- -
-----------------------------------
-
---
-------- -------------- -
------ -------------------------
-
---------
-------
-------结论
@npm-polymer/iron-input 是一个功能强大的 Polymer 元素，可以轻松创建一个输入框，并支持类型验证和自定义验证等功能。使用 iron-input 极大地提高了前端开发效率，我们可以轻松地实现各种表单验证和提示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff181e8991b448ddb31