聚合物纸张输入自定义验证器问题

时间:2016-02-29 20:28:23

标签: validation polymer-1.0 paper-elements

我正在尝试为纸张输入实现自定义验证器。在这种特殊情况下,控件应该接受正数。但是,不仅控制仅接受正数,它还将运行一些其他自定义验证逻辑,以确定条目是否属于不断变化的(动态和计算的)上限和下限。理想情况下,纸张输入控件的错误消息文本也会根据自定义验证程序检查失败的部分而改变。

过去,我能够使用gold-email-input元素实现这种功能。在这种情况下,控件检查与电子邮件地址的正则表达式匹配的条目(即,实现类型检查)。它还调用后端api来查看输入的电子邮件地址(因为它正在键入)已经存在于数据库中。如果它存在于数据库中,则控件将无法通过验证并使用自定义消息更新控件的验证错误消息。如果它不存在,则通过验证。正如您可能已经通过此描述想象的那样,这是针对用户注册UI元素,其中所提供的电子邮件不应该已存在于当前用户帐户列表中。以下是该工作代码的摘录供您参考:

<gold-email-input id="userEmail" label="Email" required auto-validate value="{{userEmail}}" error-message$="{{_getEmailErrorMsg(0)}}" invalid="{{_emailInvalid}}" validator="_validateEmail"></gold-email-input>

<iron-signals on-iron-signal-email-used="_accountFound" on-iron-signal-email-available="_accountNotFound"></iron-signals>

<script>

     var emailErrors = ["Provide a valid email address", "Address already used"];

     // Register the polymer element
     Polymer({
          properties: {
               userEmail: {type: String, value: null},
               validated: {type: Boolean, notify: true}, //overall validity state of entire element

               _emailInvalid: {type: Boolean, value: true, observer: "_validityChanged"}, // validity state of email input itself

          },

          ready: function() {
              // Called before attached
              this.$.userEmail.validate = this._validateEmail.bind(this);
          },

          _accountFound: function() {
               // Listener function intended to fire when the user email address/account was found
               console.log(this.nodeName + " accountFound listener called\n");
               this.$.userEmail.errorMessage = this._getEmailErrorMsg(1);
               this._emailInvalid = true;
          },

          _accountNotFound: function() {
               // Listener function intended to fire when the user email address/account was not found
              console.log(this.nodeName + " accountNotFound listener called\n");
              this.$.userEmail.errorMessage = this._getEmailErrorMsg(0);
              this._emailInvalid = false;
          },

          _checkAccountExistance: function() {
               if (this.userEmail !== undefined && this.userEmail != null) {
                    this.$.user.checkEmailAvailability(this.userEmail);
               } else {
                    this._emailInvalid = true;
               }
          },

          _getEmailErrorMsg: function(code) {
              if (code !== undefined && code != null) {
                   return emailErrors[code];
              } else {
                   return "";
              }
          },

          _validateEmail: function() {
               // Custom validator function for email input (also checks if email has already been associated to any user accounts)
               console.log(this.nodeName + " validateEmail validator called\n");

               // Check if proper email address format (W3C Spec Regex used)
               var validEntry = /^[a-zA-Z0-9.!#$%&�*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(this.userEmail);

               if (validEntry) {
                    this._emailInvalid = false;
                    this._checkAccountExistance();
               } else {
                    this._emailInvalid = true;
               }
          }

          _validityChanged: function(newVal, oldVal) {
               // set the containing/parent element's overall validity state

               this.validated = (!this._nameInvalid && !this._pwInvalid && !this._phoneInvalid && !this._emailInvalid && !this._countryInvalid && !this._regionInvalid && !this._cityInvalid);
          },
     });
</script>

现在,如果我尝试使用纸张输入组件实现类似的方法,它就不起作用了。自定义验证器函数不会在任何时候被调用。与黄金电子邮件输入相比,纸张输入是否存在某种本质上不同的东西?它不应该以同样的方式处理验证吗?

<paper-input id="xpos" label="Horizontal Position" required auto-validate value="{{XPos}}" error-message="Provide the x position" invalid="{{_xInvalid}}" validator="_validatePosition"></paper-input>

<script>

     // Register the polymer element
     Polymer({
          properties: {
               xPos: {type: Number},
               validated: {type: Boolean, notify: true}, //overall validity state of entire element

               _xInvalid: {type: Boolean, value: true, observer: "_validityChanged"}, // validity state of xpos input itself

          },

          ready: function() {
              // Called before attached
              this.$.xpos.validate = this._validatePosition.bind(this);
          },

          _validatePosition: function() {
               console.log(this.nodeName + " validatePosition validator called\n"); 

               // perform some validation code here like the gold-email-input example above
          }
     });
 </script>

0 个答案:

没有答案