3.7　邮箱格式验证

案例描述

在邮箱输入框中输入的字符包含“@”和“.”两个字符，则提示“邮箱格式正确！”；否则提示“邮箱格式错误！”，如图3-85所示。

思路分析

• ▷　为“文本框”元件添加“文本改变时”事件。
• ▷　添加判断条件，通过输入的字符是否是数字或字符且是否包括“@”和“.”来判断。
• ▷　通过截取的字符串长度是否大于0来判断邮箱格式是否正确。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在左侧“元件库”面板中将“文本标签”元件拖入编辑区中，双击使其呈编辑状态，输入“邮箱：”，在右侧单击“样式”标签切换至“样式”面板，在“位置·尺寸”区域设置“x轴坐标”为80，“y轴坐标”为80，如图3-86所示。

（3）在左侧“元件库”面板中将“文本框”元件拖入编辑区中，在工具栏中设置x为140，y为75，“宽度”为230，“高度”为25，在右侧“检视：文本框”区域设置名称为email，如图3-87所示。

（4）在左侧“元件库”面板中将“文本标签”元件拖入编辑区中，双击删除文本标签默认文字，在右侧“检视：矩形”区域设置名称为tips，在工具栏中设置x为400，y为80，“文本颜色”为红色（#FF0000），如图3-88所示。

（5）在编辑区选择“email文本框”元件，在右侧“属性”面板中双击“文本改变时”选项，弹出“用例编辑<文本改变时>”对话框，单击“添加条件”按钮，弹出“条件设立”对话框，在第一个下拉列表框中选择“值”，单击文本框右侧的fx按钮，弹出“编辑文本”对话框，在下方单击“添加局部变量”超链接，设置LVAR1等于“元件文字”email，在上方插入函数，如图3-89所示。单击“确定”按钮返回“条件设立”对话框。

（6）在第二个下拉列表框中选择“是”，第三个下拉列表框中选择“字母或数字”，如图3-90所示。

（7）单击右侧“添加行”按钮，添加一行，在第一个下拉列表框中选择“值”，单击文本框右侧的fx按钮，弹出“编辑文本”对话框，在下方单击“添加局部变量”超链接，设置LVAR1等于“元件文字”email，在上方插入函数，如图3-91所示。单击“确定”按钮返回“条件设立”对话框。

（8）在第二个下拉列表框中选择“>”，第三个下拉列表框中选择“值”，在最后的文本框中输入0，如图3-92所示。

（9）用同样的方法添加行，设置条件，分别判断“@”和“.”之间的字符与“.”之后的字符长度，函数设置如图3-93和图3-94所示。单击两次“确定”按钮返回至“用例编辑<文本改变时>”对话框。

（10）在左侧“添加动作”区域选择“设置文本”选项，在右侧“配置动作”区域选中“tips（矩形）”复选框，设置文本值为“邮箱格式正确！”，如图3-95所示。单击“确定”按钮返回至编辑区中。

（11）再次双击“文本改变时”选项添加用例2，弹出“用例编辑<文本改变时>”对话框。按照步骤（10）的操作设置文本值为“邮箱格式错误！”，如图3-96所示。单击“确定”按钮返回至编辑区中。

（12）按Ctrl+S快捷键，以“3.7”为名称保存该文件，然后按F5键预览效果，如图3-97所示。