我们先看一下最终的效果:

需求分析

原型设计
(1)拖入账号输入框account,设置最大输入长度为10,设置输入提示“账号只能包含字母和数字”;
(2)拖入图片account_img和文本account_msg,并且设置为隐藏;
(3)拖入密码输入框pass,设置输入类型为密码,设置输入提示”密码为6位数字“;
(4)拖入图片pass_img和文本pass_msg,并设置为隐藏;
(5)拖入注册按钮;
(6)拖入文本reg_result,并设置为隐藏;

(7)设置全局变量reg_pass_correct和reg_account_correct。

交互设计
(1)设置账号输入框account的“失去焦点事件”:


(2)设置密码输入框pass的“失去焦点事件”:


(3)设置登录按钮的点击事件:


到了这步,注册的功能就算做好了,同学们赶紧去试试吧。
本文作者 @马白龙