中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

輸入框可以說是每個軟件、系統、app必不可少的組成成分了，但是很多剛入行的產品經理對輸入框原件并不懂得如何使用，對判斷的邏輯也不清晰。本文作者從工作實踐出發，分享了手機版輸入框的相關設計思路，避免大家走一些不必要的彎路。

輸入框可以分為以下幾個類型，單行內容文本框、多行內容文本框、手機號碼文本框、電子郵箱文本框、身份證號碼文本框、密碼輸入框、驗證碼輸入框……

01 單行內容文本框

單行內容文本框是最簡單的一個文本框，對輸入的內容沒有任何的限制，和web端文本框不同的地方只是，在文本框獲取焦點時，彈出鍵盤，鍵盤按鍵按下時，在文本框光標位置添加按鍵文本即可。

雖然單行文本框邏輯簡單，但是后續的文本框都是以單行文本框的基礎上變形或增加條件。

02 多行內容文本框

多行內容文本框主要是用于寫文章、發博客等需要輸入較長文字的地方，其原理是在單行文本框的基礎上增加了行數，所以這里注意，在點擊enter按鈕時，要添加換行的邏輯，其他和單行文本框邏輯一致。

03 手機號碼文本框

由于各國的手機號碼格式都不一樣，所以我以中國大陸的手機號碼輸入框為案例，講解手機號碼輸入框的邏輯，首先手機號碼是純數字的，不能出現漢子、字母或者特殊符號。

所以，我們要對手機鍵盤進行控制，即只能輸入數字，如果用戶點擊其他按鈕如字母、特殊字符，則無需進行交互，其次需要判斷手機號碼的位數是否為11位，如果不為11位，則手機號碼填寫錯誤，提示客戶重新填寫，如果手機號碼為11位，再進行下一步判斷，判斷收位數是否為1，如果不為1，則手機號碼填寫錯誤，提示客戶重新填寫，如果為1，則手機號碼填寫正確。

04 電子郵箱文本框

email輸入框同樣是在單行內容文本框的基礎上添加判斷條件。

首先我們需要判斷@的個數，正確的電子郵箱有且僅有1個@，所以我們要判斷電子郵箱文本框是否僅有1個@，如果不是的話，則輸入的電子郵箱的格式有誤，需要提示用戶重新輸入；

如果是的話，我們在判斷是否有“.”，如果沒有“.”，則輸入的電子郵箱的格式有誤，需要提示用戶重新輸入；如果有“.”，我們在判斷“.”的位置，在@的后面必須由至少一個“.”，如果沒有則輸入的電子郵箱的格式有誤，需要提示用戶重新輸入，如果以上全部條件符合，我們沒有理由拒絕電子郵箱是正確的原假設。

05 身份證輸入文本框

身份證號碼輸入框，需要在單行內容輸入框的前提先加入限制條件和判斷條件。

限制條件：只能輸入數字和英文字母X（由于有些用戶習慣輸入小寫x，所以同樣可以輸入x）

判斷條件：首先判斷輸入內容是否為18位字符，如果不符合條件，提醒用戶身份證號碼輸入錯誤；如果符合條件，在判斷是否有英文字母x和X，如果有，那繼續判斷x和X是否僅在第18位，如果不是，提醒用戶身份證號碼輸入錯誤；如果是，則簡單的判斷身份證號碼正確。

為什么說簡單的判斷呢，因為身份證的組成是有不同的意義：

• 1-6位是出生地址編碼，如果要復雜的做還要校驗地址編碼是否正確
• 7-14位是出生年月日，如果要復雜的做還要校驗出生日期的格式是否正確
• 15-16位是出生順序號，無需校驗
• 17位是性別編號，無需校驗
• 18位是身份證校驗嗎，也無需校驗

但是就算將全部規則寫進去，也有可能出現身份證號碼和姓名不對，現實一般會連公安局聯網核查系統，由系統告知我們輸入的身份證號碼是否正確，因為我們沒有借口，所以就簡單的做了。

06 密碼文本框

密碼文本框就是在單行內容文本框的基礎上，加一個切換可視狀態的效果，這個是最簡單的密碼輸入框。一般的話還要根據安全性需求添加一些特定的條件，例如8-20位字符、需要同時具備數字、大小寫字母、特殊符號等等，大家可以按照實際需求添加限制條件。

07 驗證碼文本框

這里的驗證碼指的是手機短信驗證碼，也是在單行內容文本框的基礎上添加限定的條件，只能輸入數字，然后位數有些是4位，有些是6位，可以根據實際需求來添加條件。一般的為了驗證碼輸入框更新美觀，我們都話把輸入框樣式改成如下如所示。

那以上就是本期關于移動端常用的輸入框介紹的全部內容，主要是基于我個人在實際工作中需要用到的原型，而設計出來的axure組件。

如果大家有所收獲，希望可以點贊鼓勵一下，也歡迎大家交流，謝謝。

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

題圖來自Unsplash，基于CC0協議