Axure教程:一個中繼器實現密碼驗證

6 評論 4428 瀏覽 17 收藏 3 分鐘

本文給大家介紹用一個中繼器實現axure登錄時賬號密碼驗證效果,一起來看看~

實現效果如下圖:

工具/原料:

  • 賬號文本框
  • 密碼文本框
  • 登錄按鈕
  • 中繼器
  • 記錄密碼的文本標簽(隱藏)
  • 提示框(隱藏)
  • 驗證按鈕(隱藏)

方法/步驟

步驟1

設置中繼器:

  1. 新增列account
  2. 新增列password
  3. 在中級期內輸入賬號密碼組
  4. 設置中繼器每項加載時事件:設置記錄密碼的文本標簽=中繼器的password

步驟2

設置登錄按鈕鼠標單擊時事件:

  1. 如果賬號密碼都為空,設置提示框文字=請輸入賬號和密碼,顯示提示框。
  2. 如果賬號為空,密碼不為空,設置提示框文字=請輸入賬號,顯示提示框。
  3. 如果密碼為空,賬號不為空,設置提示框文字=請輸入密碼,顯示提示框。
  4. 如果賬號密碼都填了,用賬號框的文字對中繼器進行篩選,然后出發驗證按鈕的鼠標單擊時事件。

步驟3

設置驗證按鈕鼠標單擊時事件:

  1. 如果中繼器可見項為0,即賬號不存在,設置提示框文字=賬號不存在,顯示提示框。
  2. 如果中繼器項不為0,且密碼文本框不等于記錄密碼的文字,設置提示框文字=您輸入的賬號或密碼不正確,請重新輸入,顯示提示框。
  3. 如果中繼器項不為0,且密碼文本框等于記錄密碼的文字,設置提示框文字=正在登陸,并跳轉到登陸頁面。

 

注意事項:本原型可在axure官網下載。

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 原型預覽及下載地址:
    https://axhub.im/pro/d556d5a7c51ee0ed

    來自廣東 回復
  2. 有畫圖的流程嗎?中間好多地方看不懂啊

    來自河南 回復
  3. 看完一篇原型設計文章啦,感覺還是不太會?

    想從0基礎開始學習Axure么?推薦你找Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    ? 領取原型設計大禮包,多學多練,你也能成為原型設計高手哦!

    來自廣東 回復
  4. 是不是設置了全局變量

    來自福建 回復
  5. 原型怎么下載呢,可以提供一個嗎

    來自福建 回復
  6. 沒看懂

    來自上海 回復