如何繪制可以校驗的輸入框?

3 評論 3630 瀏覽 6 收藏 4 分鐘

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 元件庫很棒 支持一下

    來自江蘇 回復
  2. XSTAR怎么下載?沒搜到這個軟件名稱啊?博主能分享下下載地址嗎?多謝

    來自北京 回復
    1. 來自北京 回復