輸入框可以說是每個(gè)軟件、系統(tǒng)、app必不可少的組成成分了，但是很多剛?cè)胄械漠a(chǎn)品經(jīng)理對(duì)輸入框原件并不懂得如何使用，對(duì)判斷的邏輯也不清晰。本文作者從工作實(shí)踐出發(fā)，分享了手機(jī)版輸入框的相關(guān)設(shè)計(jì)思路，避免大家走一些不必要的彎路。

輸入框可以分為以下幾個(gè)類型，單行內(nèi)容文本框、多行內(nèi)容文本框、手機(jī)號(hào)碼文本框、電子郵箱文本框、身份證號(hào)碼文本框、密碼輸入框、驗(yàn)證碼輸入框……

01 單行內(nèi)容文本框

單行內(nèi)容文本框是最簡(jiǎn)單的一個(gè)文本框，對(duì)輸入的內(nèi)容沒有任何的限制，和web端文本框不同的地方只是，在文本框獲取焦點(diǎn)時(shí)，彈出鍵盤，鍵盤按鍵按下時(shí)，在文本框光標(biāo)位置添加按鍵文本即可。

雖然單行文本框邏輯簡(jiǎn)單，但是后續(xù)的文本框都是以單行文本框的基礎(chǔ)上變形或增加條件。

02 多行內(nèi)容文本框

多行內(nèi)容文本框主要是用于寫文章、發(fā)博客等需要輸入較長(zhǎng)文字的地方，其原理是在單行文本框的基礎(chǔ)上增加了行數(shù)，所以這里注意，在點(diǎn)擊enter按鈕時(shí)，要添加換行的邏輯，其他和單行文本框邏輯一致。

03 手機(jī)號(hào)碼文本框

由于各國(guó)的手機(jī)號(hào)碼格式都不一樣，所以我以中國(guó)大陸的手機(jī)號(hào)碼輸入框?yàn)榘咐?，講解手機(jī)號(hào)碼輸入框的邏輯，首先手機(jī)號(hào)碼是純數(shù)字的，不能出現(xiàn)漢子、字母或者特殊符號(hào)。

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

04 電子郵箱文本框

email輸入框同樣是在單行內(nèi)容文本框的基礎(chǔ)上添加判斷條件。

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

如果是的話，我們?cè)谂袛嗍欠裼小?”，如果沒有“.”，則輸入的電子郵箱的格式有誤，需要提示用戶重新輸入；如果有“.”，我們?cè)谂袛唷?”的位置，在@的后面必須由至少一個(gè)“.”，如果沒有則輸入的電子郵箱的格式有誤，需要提示用戶重新輸入，如果以上全部條件符合，我們沒有理由拒絕電子郵箱是正確的原假設(shè)。

05 身份證輸入文本框

身份證號(hào)碼輸入框，需要在單行內(nèi)容輸入框的前提先加入限制條件和判斷條件。

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

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

為什么說簡(jiǎn)單的判斷呢，因?yàn)樯矸葑C的組成是有不同的意義：

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

但是就算將全部規(guī)則寫進(jìn)去，也有可能出現(xiàn)身份證號(hào)碼和姓名不對(duì)，現(xiàn)實(shí)一般會(huì)連公安局聯(lián)網(wǎng)核查系統(tǒng)，由系統(tǒng)告知我們輸入的身份證號(hào)碼是否正確，因?yàn)槲覀儧]有借口，所以就簡(jiǎn)單的做了。

06 密碼文本框

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

07 驗(yàn)證碼文本框

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

那以上就是本期關(guān)于移動(dòng)端常用的輸入框介紹的全部?jī)?nèi)容，主要是基于我個(gè)人在實(shí)際工作中需要用到的原型，而設(shè)計(jì)出來的axure組件。

如果大家有所收獲，希望可以點(diǎn)贊鼓勵(lì)一下，也歡迎大家交流，謝謝。

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

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