输入框可以说是每个软件、系统、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协议