如何繪制可以校驗的輸入框?
編輯導語:如何才能解決原型設計中輸入框校驗的問題?本篇文章里,作者就對如何繪制可以校驗的輸入框的相應流程進行了梳理,一起來看一下吧,也許會對你有所幫助。
在原型設計中,輸入框校驗效果設計是一件令人頭疼的事情,但是可以通過使用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 協議。
評論
元件庫很棒 支持一下
XSTAR怎么下載?沒搜到這個軟件名稱啊?博主能分享下下載地址嗎?多謝
http://www.atomstudio.cn/download