編輯導語：如何才能解決原型設計中輸入框校驗的問題？本篇文章里，作者就對如何繪制可以校驗的輸入框的相應流程進行了梳理，一起來看一下吧，也許會對你有所幫助。

在原型設計中，輸入框校驗效果設計是一件令人頭疼的事情，但是可以通過使用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 協議。