编辑导语：如何才能解决原型设计中输入框校验的问题？本篇文章里，作者就对如何绘制可以校验的输入框的相应流程进行了梳理，一起来看一下吧，也许会对你有所帮助。

在原型设计中，输入框校验效果设计是一件令人头疼的事情，但是可以通过使用bootstrap元件库中的输入框设置，可以轻松解决输入框校验的问题。

一、效果预览

预览地址：http://atomstudio.cn/demos/bootstrap_input

二、准备工作

需要安装XSTAR2022.1.22版（或更高版本）

三、操作步骤

1）打开软件，选择bootstrap元件库，在元件列表中将输入框拖拽到编辑区。

2）选中编辑区的输入框组件，右侧显示出输入框设置面板。

3）在输入框设置面板中勾选验证成功提示和验证失败提示。

4）编辑提示文本内容

5）设置前缀、后缀

6）设置提示样式

7）设置验证规则

可选规则包括：

任意字符英文字母大写英文字母小写英文字母数字、英文字母或者下划线汉字任意数字英文和数字中文、英文、数字包括下划线域名网址邮箱地址http网址https网址手机号码电话号码国内电话号码身份证号短身份证号码账号是否合法密码强密码日期格式（1900-10-10）一年的12个月1个月的31天xml文件空白行HTML标记中国邮政编码IP地址

8）根据需要设置完成后，进行预览、导出或者分享。

本文由 @balabala 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。

声明:本文由"麦兜"发布，不代表"破站"立场，转载联系作者并注明出处：https://www.848586.cn/258458.html