# 设计到的前端知识
项目的前端页面使用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 %}
```
### 导入vue.js和ajax请求的js库
```html
```
### 准备register.js文件
register.js文件主要处理注册页面的交互事件，并且向服务端提交注册表单请求
```html
```
下面是实现的前端校验逻辑以及表单提交逻辑
```vue
methods: {
// 校验用户名
check_username() {
let re = /^[a-zA-Z0-9_-]{5,20}$/;
if (re.test(this.username)) {
this.error_name = false;
} else {
this.error_name_message = '请输入5-20个字符的用户名';
this.error_name = true;
}
},
// 校验密码
check_password() {
let re = /^[0-9A-Za-z]{8,20}$/;
this.error_password = !re.test(this.password);
},
// 校验确认密码
check_password2() {
if (this.password !== this.password2) {
this.error_password2 = true;
} else {
this.error_password2 = false;
}
},
// 校验手机号
check_mobile() {
let re = /^1[3-9]\d{9}$/;
if (re.test(this.mobile)) {
this.error_mobile = false;
} else {
this.error_mobile_message = '您输入的手机号格式不正确';
this.error_mobile = true;
}
},
// 校验是否勾选协议
check_allow() {
this.error_allow = !this.allow;
},
// 监听表单提交事件
on_submit() {
this.check_username();
this.check_password();
this.check_password2();
this.check_mobile();
this.check_allow();
# 输入字段中有一个不符合规则就禁止
if (this.error_name === true || this.error_password === true || this.error_password2 === true
|| this.error_mobile === true || this.error_allow === true) {
// 禁用表单的提交
window.event.returnValue = false;
}
},
}
```
##后端业务注册逻辑
在用户输完用户名之后，我们往往希望能够跟快的给出这个用户名是否符合注册需求，前面只是对用户名的规则进行了校验，还想知道他是否已经在系统注册过了，不然当用户都输完提交注册再给出用户名或者手机号已经注册过，体验不是特别好。所以需要在光标离开用户名输入框的时候就请求服务端来判断是否注册过。
定义路由
```python
path('register/', views.RegisterView.as_view(), name='register'), # name添加命名空间
path('usernames/