The general registration process includes the following steps:
1. The user fills in the form as prompted.
2. When the user fills in the form, it is prompted whether the input is correct. If not, the user is prompted.
3. When the user submits the form, check whether all items are correct. If there is an error, it will prompt which item is wrong.
4. The user successfully submits the form or cancels the form.
In the process of filling out the form, the common verification methods are as follows:
1. Whether the user has used illegal characters in the registered username or ID.
2. Whether the user has entered content.
3. Whether the passwords entered twice are the same.
4. Whether it is a qualified Email address.
5. Whether the length is between 6-12 characters.
Next, we use Axure7.0 to complete the design of universal registration. The following includes the most basic input box changes and prompt text changes.
1. Layout of the form
Drag and drop 7 text labels and name them as shown.
Select them all, click Align Right to make them all aligned, and click Distribute Vertically to make their top and bottom spacing the same.
Drag and drop 5 text boxes, corresponding to the following items respectively, then select all and choose left alignment.
Select the text labels and text boxes of each row and select Center Vertically to align each row.
Add a corresponding input widget for gender, with two radio buttons, aligned. The names are male and female.
Select them, right-click, select Specify radio button group, and then enter the group name and gender in the pop-up box, so that the radio selection is realized.
Add a dropdown list widget for the location. Then edit the list item to add options for the list bar.
Add another button widget named: Register Now
2. Make the border of the input box to change the box
When we fill in a text box input box, the input box will be highlighted, and then the right side will prompt the user what to enter. If the input does not meet the requirements, the right side will prompt.
Select the 5 text input boxes, right-click, and select Hide Border. (I will explain why it is hidden at the end)
Drag and drop a dynamic panel and name it Mailbox. Add one more state, named Entered and Not Entered.
Then add two rectangles in the input state, the border color and fill color are as shown in the figure. The second rectangle is the tooltip text.
The rectangle size is 2 pixels larger than the text box, in order to completely cover the original text box when switching states.
Brings the text input box that was placed first on top.
Switch to the uninput state, copy the first rectangle in the input state here, and then change the border color to the default gray.
Modify the panel order to put the unentered state first.
panel order
Click Preview, the interface is as shown below.
3. Let the border move
为我的邮箱输入框添加如下事件，当文本框获得焦点的时候为输入状态，失去焦点的时候为未输入状态。
生成后看到如下界面：
四.添加其他输入框和提示
这部需要把邮箱那部分制作好的动态面板复制到其他输入项中。
复制到其他选项，注意调整坐标。
修改其他动态面板名字。
需改其他动态面板输入状态下的提示文字。
把动态面板都至于底层，输入框置于顶层。
分别添加状态，与邮箱添加状态时一样。
五.完成效果
在此我们将最开始的文本输入框隐藏，代替它的的动态面板的未输入状态，边框为黑色，在鼠标移动后就变为输入状态，显示为蓝色和提示文字。这样就完成了注册设计中的边框效果和提示文字。还有验证输入，验证密码，处理验证码等以后再做总结。