如何验证和显示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
}
}
}
]
});
有人已经更新了警报控制器,并为离子团队拉请求。我认为离子团队计划在未来实现这一点。https://github.com/ionic-team/ionic/pull/12541
我需要一些解决这个验证功能。
平面图http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview
感谢你的帮助。
5条答案
按热度按时间ukqbszuj1#
目前该功能尚未实现,可以看到this Git issue。
我在这里使用了
Toast
通知,我没有收到客户的任何抱怨:)以下是我所做的。
done
处理程序:*pgccezyw2#
我确实找到了一个使用setMessage方法的解决方案。最初消息将为空,当用户没有输入任何值时,验证消息将在单击时填充。请查找下面的代码片段
您可以覆盖变量.scss文件中消息的字体,如下所示
u2nhd7ah3#
使用吐司的解决方案是完全有效的,但是从UX的Angular 来看,我发现它太多地分散了用户的注意力,以至于无法通过toast来打开警报和发送表单错误消息。
相反,我喜欢将验证附加到警报的DOM。这个例子是一个简单的警报,只有一个输入,但是可以很容易地用一些util方法扩展,以创建验证样板。我还在一个快速的stackblitz中创建了这个例子。在我的例子中,我已经在整个应用程序中包含了验证错误标记的变体,所以样式已经是全局的。我只需要引入标记来使它具有样式。
wtlkbnrh4#
您可以使用REGX验证电子邮件。
这是示例。2只要用你函数替换这个函数。
我希望这能帮助到一些人。
z8dt9xmd5#
我想出了一个鬼鬼祟祟的变通办法。如果你想要
input
字段在输入不正确时抖动(振动)或者在下面显示错误。你可以给予这个。我在Ionic 6上测试了这个,但是我不确定早期版本(请随时尝试并更新此答案)
从本质上讲,
alertController
返回一个Ion element
,您可以使用querySelector
来定位inputs
并添加您的样式和使用animate快捷方式方法。@离子/(Angular /Angular /React)