Question

如何在Ionic 2或3中的警报控制器中输入验证并显示错误

let prompt = Alert.create({
      title: 'Alert input validation',
      message: "How can I validate below input field?",
      inputs: [ 
        {
          name: 'email',
          placeholder: 'email'
        },
      ],
      buttons: [
        {
          text: 'Save',
          handler: data => {
                        let validateObj = this.validateEmail(data);
                        if (!validateObj.isValid) {
                            alert(validateObj.message);
                            return false;
                        } else {
                            //make HTTP call
                        }
                    }
        }
      ]
    });

有人已经更新了警报控制器，并为Ionic团队做了拉取请求。我认为Ionic团队规划将来会实现这一点。 https://github.com/ionic-team/ionic/pull/12541

我需要解决此验证功能。

plnkr http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview

感谢您的帮助。

Answer 1

目前此功能尚未实施。您可以看到this Git issue。

我在这里使用了Toast通知，但我没有从我的客户那里得到任何投诉：）

这就是我所做的。

提醒boxe＆＃39; done处理程序：

{
          text: 'Done',
          handler: (data) => {
            if (EmailValidator.isValid(data.email)) {
              if (this.data) {
                //my code
              } else {
                //my code
              }
              return true;
            } else {
              this.showErrorToast('Invalid Email');
              return false;
            }
          }
        }

Toast方法是这样的：

showErrorToast(data: any) {
    let toast = this.toastCtrl.create({
      message: data,
      duration: 3000,
      position: 'top'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

UI

Answer 2

我确实通过使用setMessage方法找到了解决方法。最初消息将为空，当用户未输入任何值时，将在单击时填写验证消息。找到下面的代码段

let prompt = Alert.create({
  title: 'Alert input validation',
  message: '',
  inputs: [ 
    {
      name: 'email',
      placeholder: 'email'
    },
  ],
  buttons: [
    {
      text: 'Save',
      handler: data => {
                    let validateObj = this.validateEmail(data);
                    if (!validateObj.isValid) {
                        prompt.setMessage('Your validation message');
                        return false;
                    } else {
                        //make HTTP call
                    }
                }
    }
  ]
});

您可以覆盖variable.scss文件中的消息字体，如下所示

$alert-md-message-text-color:red;

Answer 3

使用 toast 的解决方案是完全有效的，但从 UX 的角度来看，我发现它把用户的注意力分散了太多，以至于无法打开警报并通过 toast 传递表单错误。

相反，我喜欢将验证附加到警报的 DOM。此示例是一个具有单个输入的简单警报，但可以使用一些 util 方法轻松扩展以创建验证样板。我还在快速 stackblitz 中创建了示例。就我而言，我已经在整个应用程序中包含了验证错误标记的变体，因此样式已经是全局的，我只需要引入标记即可对其进行样式设置。

const alert = await this.alertController.create({
  header: 'Example Header',
  subHeader: 'Example Subheader',
  message: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
  backdropDismiss: false,
  cssClass: 'example-alert',
  inputs: [
    {
      type: 'text',
      name: 'mobilePhone',
      label: 'Mobile Phone',
      placeholder: 'Mobile phone (10 digits)',
      attributes: {
        maxlength: 10
      }
    }
  ],
  buttons: [
    {
      text: 'Ok',
      handler: (formData: { mobilePhone: string }) => {
        if (formData.mobilePhone && PhoneValidator.isValid(formData.mobilePhone)) 
          return formData;
        } else {
          // Only if no validation has been inserted into the DOM
          if (!alert.getElementsByClassName('validation-errors').length) {
            const input = alert.getElementsByTagName('input')[0];

            const validationErrors = document.createElement('div');
            validationErrors.className = 'validation-errors';

            const errorMessage = document.createElement('small');
            errorMessage.classList.add('error-message');
            errorMessage.textContent = 'Invalid phone number';

            validationErrors.appendChild(errorMessage);

            input.insertAdjacentElement('afterend', validationErrors);
          }

          return false;
        }
      }
    }
  ]
});

await alert.present();

.validation-errors {
  padding-top: 5px;
  text-align: left;

  .error-message {
    color: var(--ion-color-danger);
    font-size: 12px;
  }
}

// Example of markup:
//<div class="validation-errors">
//  <small class="error-message"></small>
//</div>

Answer 4

您可以使用REGX验证电子邮件。

这里是样本。只需用你的替换这个功能。

validateEmail(data) {
    if( /(.+)@(.+){2,}\.(.+){2,}/.test(data.email) ){
      return {
        isValid: true,
        message: ''
      };
    } else {
       return {
          isValid: false,
          message: 'Email address is required'
       }
    }
}

我希望这会对某人有所帮助。

警报控制器输入框验证

4 个答案: