Axure如何对输入的内容进行验证-Axure基础教程

 时间:2024-10-14 04:58:03

1、我们这里以文本框为例,新建一个文本输入框,然后在建一个标签。文本输入框用来输入需要校验的信息,标签是我们要显示的提示语。如图所示:

Axure如何对输入的内容进行验证-Axure基础教程

2、设置标签样式。选中标签,将提示语的文字颜色给为红色,然后设置为隐藏。勾选右上角的隐藏选项即可。

Axure如何对输入的内容进行验证-Axure基础教程
Axure如何对输入的内容进行验证-Axure基础教程

3、设置输入框失去焦点事件。选中文本输入框,单击交互面板中的失去焦点时--打开交互设置界面。

Axure如何对输入的内容进行验证-Axure基础教程

4、设置判断条件。点击添加条件,设醅呓择锗置判断条件如图所示:邮箱验证比较简单,我们一般只需要验证@符号和.com两个关键点。所以只要输入的文字中不包含这两个元素中的任何一个,我们就显示提示标签。注意,添加两个条件一定要选择任何,不要选择全部,这个就是and和or的区别。

Axure如何对输入的内容进行验证-Axure基础教程

5、配置条件对应的动作。点击显示--然后选择我们第二步中隐藏的提示标签。这样在文本框失去焦点的时候会校验我们添加的条件,如果条件满足,就显示提示标签。

Axure如何对输入的内容进行验证-Axure基础教程

6、配置文字改变时条件及动作。点击交互面板中的文字改变时--添加条件。我们这里要选择文字中包含@敛财醣沁并且包含.com,提示的标签隐藏。注意,这里两个条件要选择全部,必须是两个条件同时满足才可以。如图所示:

Axure如何对输入的内容进行验证-Axure基础教程
Axure如何对输入的内容进行验证-Axure基础教程
Axure如何对输入的内容进行验证-Axure基础教程

7、点击预览,输入一个错误的格式,会提示格式不正确,修改会提示消失。

Axure如何对输入的内容进行验证-Axure基础教程
Axure如何对输入的内容进行验证-Axure基础教程
Axure如何对输入的内容进行验证-Axure基础教程
  • Axure RP 如何添加下拉列表数据?
  • AxureRP如何设置元件位置
  • axure怎么制作抽奖动画?
  • Axure实现中继器添加图片、文字数据
  • axure怎么设置弹框动画?
  • 热门搜索
    爱心手抄报图片 生态文明手抄报内容 关于莲的手抄报 节约水资源手抄报 科学幻想画手抄报 消防安全教育手抄报 地震手抄报内容 小学生读书手抄报内容 手抄报小装饰 八十天环游地球手抄报