Question

我有这个paper-input元素定义：

<paper-input label="time_of_birth"
             required=True
             prevent-invalid-input
             allowed-pattern="([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]" 
             placeholder="00:00"
             error-message="24 hour formatted HH:MM">
</paper-input>

正则表达式非常有用here。但是，当我尝试输入值（在polyserve服务器下运行）时，根本不允许键盘输入。 Dev Tools控制台中没有错误，也没有出现错误消息。

Answer 1

问题在于您使用allowedPattern，这是为了指定可输入的字符集（即character class），此属性在与之配对时会阻止所有其他字符preventInvalidInput。对于 HH：MM 时间值，allowedPattern应为数字或冒号（即[\d:]）。您可能打算设置一个输入模式，指定所需的值格式。为此，您应该使用pattern。

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo',
    _submit: function() {
      console.log('submit', `valid: ${this.$.input.validate()}`);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <form is="iron-form" action="">
        <paper-input id="input" label="time_of_birth"
             required
             prevent-invalid-input
             allowed-pattern="[\d:]"
             pattern="([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]" 
             placeholder="00:00"
             error-message="24 hour formatted HH:MM">
        </paper-input>
        <paper-button on-tap="_submit">Submit</paper-button>
      </form>
    </template>
  </dom-module>
</body>

codepen

Answer 2

你的正则表达式将验证33:33。你应该使用这种模式：

allowed-pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"
                 ^ makes the regex match the whole input $

PS：这应该在评论中，但我没有必要的评论声誉。

纸张输入故障排除验证，如何？

2 个答案: