django实战商城项目注册业务实现
测试轩 人气:0
# 设计到的前端知识
项目的前端页面使用vue来实现局部刷新,通过数据的双向绑定实现与用户的交互,下面来看一下需求,在用户输入内容后,前端需要做一些简单的规则校验,我们希望在在用户输入后能够实时检测,如果有错误能够在输入框的下方显示出来。
```html
请输入5-20个字符的用户
请输入8-20位的密码
```
上面是一个用户和密码的输入框,当用户输入完用户名以后,光标离开输入框,能够实时的检测输入内容的正确性,当输入有问题的时候,在输入框的下方显示错误信息。
v-model实现数据的双向绑定,v-on进行事件绑定,v-show是控制dom显示与否,下面是加入vue后的部分代码
```
[[error_name_message]]
请输入8-20位的密码
```
用户输入的用户名和username变量绑定,光标消失触发绑定时间check_username,通过v-show绑定到布尔值变量error_name,来控制是否显示字符串变量error_name_message,其他的输入框都类似这种操作。
# 注册业务实现
## 前端注册业务逻辑
注册表单代码:
```HTML
{{ csrf_input }}
- [[error_name_message]]
- 请输入8-20位的密码
- 两次输入的密码不一致
- [[ error_mobile_message ]]
- 请填写图形验证码
- 获取短信验证码 请填写短信验证码
- 请勾选用户协议
- {% if register_errmsg %} {{ register_errmsg }} {% endif %}
加载全部内容