Alert controller 输入框验证

Question

如何在 Ionic 2 或 3 中验证和显示警报 Controller 中的输入错误

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
                        }
                    }
        }
      ]
    });

有人已经更新了 alertcontroller 并为 Ionic 团队提出了拉取请求。 我认为 Ionic 团队计划在未来实现这一点。 https://github.com/ionic-team/ionic/pull/12541

对于此验证功能，我需要一些解决方法。

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

感谢你的帮助。

Answer 1

目前这个功能还没有实现。你可以看到这个 Git 问题。

我在这里使用了Toast通知，但我没有收到客户的任何投诉 :)

这是我所做的。

警报框的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;
            }
          }
        }

吐司方法是这样的：

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

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

    toast.present();
  }

用户界面

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'
       }
    }
}

我希望这会帮助某人。

Answer 5

为此，我想出了一个偷偷摸摸的解决方法。 如果您希望input字段在输入不正确时摇动（振动）或在下方显示错误。 你可以试一试。

我在 Ionic 6 上对此进行了测试，但我不确定早期版本（请随时尝试更新此答案）

本质上， alertController返回一个Ion element ，您可以使用querySelector定位inputs并添加您的 styles 并使用动画快捷方式。

@ionic/(vue/角度/反应)

import { alertController } from '@ionic/(vue/angular/react)'

const showAlert = async () => {
  const alert = await alertController.create({
    header: 'Personal details',
    backdropDismiss: false,
    buttons: [
      {
        text: 'Save',
        handler: (data) => {
          // Do you fields validation here
          let isEmailInvalid = !data.email

          shakeInputs(alert, 'email', isEmailInvalid)
  
          if (isEmailInvalid) {
            return false
          }
        }
      }
    ],
    inputs: [
      {
        name: 'email',
        placeholder: 'email'
      }
    ]
  })
}

function shakeInputs(alert, placeholder, isInvalid) {
  const input = alert.querySelector(`.alert-wrapper .alert-input-wrapper input[placeholder="${placeholder}"]`)
  if (input) {
    if (isInvalid) {
      input.classList.add('custom-input-error')

      const shake = [
        { offset: 0, transform: 'translateX(0)' },
        { offset: 0.25, transform: 'translateX(5px)' },
        { offset: 0.5, transform: 'translateX(-5px)' },
        { offset: 0.75, transform: 'translateX(5px)' },
        { offset: 1, transform: 'translateX(0)' }
      ]

      input.animate(shake, { duration: 200, iterations: 1 })
    } else {
      input.classList.remove('custom-input-error')
    }
  }
}

<style>
  .custom-input-error {
    border: 2px solid red;

    &::placeholder {
      --ion-placeholder-color: red;
    }
  }
</style>