如何向纸张输入中添加所需的指示器 [英] HowTo add a required indicator to paper-input

问题描述

给纸输入

<paper-input 
  floatingLabel label="Type only numbers... (floating)" 
  validate="^[0-9]*$" error="Input     is not a number!">
</paper-input>

如何向用户添加一些需要该字段的指示。

How do I add some indication that the field is required to the user.

推荐答案

从核心输入 docs https://github.com/Polymer/core-input/blob/master/core-input.html
AFAIK 纸张输入扩展核心输入，因此这里也应该适用：

From the core-input docs https://github.com/Polymer/core-input/blob/master/core-input.html AFAIK paper-input extends core-input therefore this should apply here too:

• 核心输入也可以选择通过提供


• 匹配的表达式或验证函数。如果输入值更改并且无效，则会触发


• 输入无效事件。


• 无效属性也可用于观察。

• core-input also can optionally validate the value by providing it with a
• regular expression to match against, or a validation function. The
• "input-invalid" event is fired if the input value changes and is invalid.
• The "invalid" property is also available for observation.

您可以将RegExp更改为

You can change your RegExp to

validate="^[0-9]+$"

http://www.regular-expressions.info/repeat.html p>

http://www.regular-expressions.info/repeat.html

加号告诉引擎尝试一次或多次匹配前面的令牌。

The plus tells the engine to attempt to match the preceding token once or more.

更新

Polymer.js核心输入和纸张输入支持a 必需属性自2014-07-08办理入住手续。 Polymer.dart的paper-elements发表于2014-06-25，因此不支持它。它应该在下一个纸张元素发布后工作。

Update

Polymer.js core-input and paper-input support a required attribute since a check-in at 2014-07-08. Polymer.dart paper-elements was published at 2014-06-25 and therefore doesn't support it yet. It should work after the next release of paper-elements.

<paper-input 
  floatingLabel label="Type only numbers... (floating)" 
  validate="^[0-9]*$" error="Input     is not a number!"
  required>
</paper-input>

似乎只有一个错误属性 validate 和 required 。

It seems there is only one error attribute for validate and required though.

发布的纸输入演示不包括一个示例 required （GitHub repo中的演示代码已经做了），所以我不知道是否提供了行为你希望。但你可以使用 required 属性，并使用CSS自己应用星号

The published paper-input demo doesn't include an example featuring required yet (the demo code in the GitHub repo already does) so I don't know if provides the behavior you wish for. But you could already use the required attribute and apply the asterisk yourself using CSS like

  * /deep/ paper-input[required] /deep/ #label::after,
  * /deep/ paper-input[required] /deep/ #floatedLabel::after {
    content: "*";
    font-weight: bold;
    font-size: 150%;
    color: red;
  }

这篇关于如何向纸张输入中添加所需的指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！