Question

我似乎错过了在Polymer中验证自定义控件的东西。

这是我正在使用的控件。它几乎与<gold-zip-input>相同。

<dom-module id="wyo-ssn-input">

  <template>

    <style>
      :host {
        display: block;
      }
    </style>

    <paper-input-container id="container"
                           auto-validate="[[autoValidate]]"
                           attr-for-value="bind-value"
                           disabled$="[[disabled]]"
                           no-label-float="[[noLabelFload]]"
                           always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
                           invalid="[[invalid]]">

      <label hidden$="[[!label]]">[[label]]</label>

      <wyo-ssn-validator></wyo-ssn-validator>

      <input is="iron-input"
             id="input"
             aria-labelledby$="[[_ariaLabelledBy]]"
             aria-describedby$="[[_ariaDescribedBy]]"
             required$="[[required]]"
             validator="wyo-ssn-validator"
             type="tel"
             allowed-pattern="[0-9\-]"
             prevent-invalid-input
             maxlength="11"
             bind-value="{{value}}"
             autocomplete="ssn"
             name$="[[name]]"
             disabled$="[[disabled]]"
             invalid="{{invalid}}"
             autofocus$="[[autofocus]]"
             inputmode$="[[inputmode]]"
             placeholder$="[[placeholder]]"
             readonly$="[[readonly]]"
             size$="[[size]]">

      <template is="dom-if" if="[[errorMessage]]">
        <paper-input-error id="error">[[errorMessage]]</paper-input-error>
      </template>

    </paper-input-container>

  </template>

  <script>
    (function() {
      Polymer({
        is: 'wyo-ssn-input',

        behaviors: [
          Polymer.PaperInputBehavior,
          Polymer.IronFormElementBehavior
        ],

        properties: {
          label: {
            type: String,
            value: 'ssn'
          }
        },

        observers: [
          '_computeValue(value)'
        ],

        _computeValue: function(value) {
          if (value === undefined || value === null || value === "null") {
            value = '';
          }

          value = String(value);

          var start = this.$.input.selectionStart;
          var previousCharADash = value.charAt(start - 1) === '-';

          value = value.replace(/-/g, '');

          if (value.length > 5) {
            value = value.substr(0,3) + '-' + value.substr(3,2) + '-' + value.substr(5);
          } else if(value.length > 3) {
            value = value.substr(0,3) + '-' + value.substr(3);
          }

          this.updateValueAndPreserveCaret(value.trim());

          if (!previousCharADash && value.charAt(start - 1) === '-') {
            this.$.input.selectionStart = start + 1;
            this.$.input.selectionEnd = start + 1;
          }
        }
      })
    })();
  </script>
</dom-module>

这是我尝试使用它的验证器。

<script>
  (function() {
    Polymer({
      is: 'wyo-ssn-validator',

      behaviors: [
        Polymer.IronValidatableBehavior
      ],

      validate: function(value) {
        var re = /^\d{3}-?\d{2}-?\d{4}$/;
        return re.test(value)
      }
    })
  })();
</script>

当我致电myInput.validate()时，它没有按下方法，而是始终返回true。

如果有人有任何想法，他们会受到赞赏，因为我对此感到茫然。

Answer 1

wyo-ssn-validator需要实施Polymer.IronValidatorBehavior（不是Polymer.IronValidatableBehavior）。这两个行为名称只有几个字母不同，所以很容易将一个字母误认为另一个。

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-input/iron-input.html">
  <link rel="import" href="iron-validator-behavior/iron-validator-behavior.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="wyo-ssn-validator">
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'wyo-ssn-validator',

          behaviors: [
            Polymer.IronValidatorBehavior
          ],

          validate: function(value) {
            var re = /^\d{3}-?\d{2}-?\d{4}$/;
            return re.test(value);
          }
        });
      });
    </script>
  </dom-module>
  
  <dom-module id="x-foo">
    <template>
      <wyo-ssn-validator></wyo-ssn-validator>
      <div>Enter SSN</div>
      <input id="input" is="iron-input" validator="wyo-ssn-validator">
      <button on-tap="_validate">Validate</button>
      <div>valid: [[isValid]]</div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _validate: function() {
            this.isValid = this.$.input.validate();
          }
        });
      });
    </script>
  </dom-module>
  
</body>

codepen

未调用聚合物验证器

1 个答案: