警报控制器输入框验证

Posted 2023-03-13

【中文标题】警报控制器输入框验证

【英文标题】：Alert controller input box validation

【发布时间】：2018-02-08 17:21:35

【问题描述】：

如何在 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
                        
                    
        
      ]
    );

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

我需要解决这个验证功能。

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

感谢您的帮助。

【问题讨论】：

打开带有错误消息的新离子警报是您的有效选项吗？

感谢@sebaferreras 的回复，对我来说没问题，但输入有效的电子邮件地址后，错误消息应该会消失。

文档确实提到，如果您正在寻找复杂的表单 ui，那么最好使用模态。这看起来像一个复杂的场景。

【参考方案1】：

目前这个功能还没有实现，可以看this Git issue。

我在这里使用了Toast 通知，我的客户没有对此提出任何投诉:)

这是我所做的。

alert boxe 的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();
  

用户界面

【讨论】：

感谢您的解决方法。我会尽力让你知道。

确定。没问题:)

【参考方案2】：

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

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;

【讨论】：

这是一个非常好的解决方法！谢谢！注意：如果您像这样设置 sass 变量，它将对您应用程序中的所有警报对话框有效，因此每个警报对话框的每条消息都将是红色的。我对吗？因此，我在警报对话框中添加了一个自定义 cssClass。

【参考方案3】：

使用 toast 的解决方案是完全有效的，但从 UX 的角度来看，我发现它过多地分散了用户的注意力，无法打开警报并通过 toast 发送错误消息。

相反，我喜欢将验证附加到警报的 DOM。此示例是一个带有单个输入的简单警报，但可以使用一些实用方法轻松扩展以创建验证样板。我还在快速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>

【参考方案4】：

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

这里是示例。只需用您的功能替换此功能即可。

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

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