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

在原型設(shè)計(jì)中，輸入框校驗(yàn)效果設(shè)計(jì)是一件令人頭疼的事情，但是可以通過使用bootstrap元件庫中的輸入框設(shè)置，可以輕松解決輸入框校驗(yàn)的問題。

一、效果預(yù)覽

預(yù)覽地址：http://atomstudio.cn/demos/bootstrap_input

二、準(zhǔn)備工作

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

三、操作步驟

1）打開軟件，選擇bootstrap元件庫，在元件列表中將輸入框拖拽到編輯區(qū)。

2）選中編輯區(qū)的輸入框組件，右側(cè)顯示出輸入框設(shè)置面板。

3）在輸入框設(shè)置面板中勾選驗(yàn)證成功提示和驗(yàn)證失敗提示。

4）編輯提示文本內(nèi)容

5）設(shè)置前綴、后綴

6）設(shè)置提示樣式

7）設(shè)置驗(yàn)證規(guī)則

可選規(guī)則包括：

• 任意字符
• 英文字母
• 大寫英文字母
• 小寫英文字母
• 數(shù)字、英文字母或者下劃線
• 漢字
• 任意數(shù)字
• 英文和數(shù)字
• 中文、英文、數(shù)字包括下劃線
• 域名
• 網(wǎng)址
• 郵箱地址
• http網(wǎng)址
• https網(wǎng)址
• 手機(jī)號碼
• 電話號碼
• 國內(nèi)電話號碼
• 身份證號
• 短身份證號碼
• 賬號是否合法
• 密碼
• 強(qiáng)密碼
• 日期格式（1900-10-10）
• 一年的12個月
• 1個月的31天
• xml文件
• 空白行
• HTML標(biāo)記
• 中國郵政編碼
• IP地址

8）根據(jù)需要設(shè)置完成后，進(jìn)行預(yù)覽、導(dǎo)出或者分享。

本文由 @balabala 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議。