这是子应用里视图的代码
这是我的注册js文件
let vm =new Vue({
el: '#app',
// 修改Vue读取变量的语法
delimiters: ['[[', ']]'],
data: {
host: "http://127.0.0.1:8000",
username: ' ',
password: ' ',
password2: ' ',
mobile: ' ',
allow: ' ',
error_name: false,
error_password: false,
error_password2: false,
error_mobile: false,
error_allow: false,
error_name_message: '',
error_mobile_message: '',
},
methods: {
check_username() {
// 用户名是5-20个字符，[a-zA-Z0-9_-]
// 定义正则
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;
}
// 判断用户名是否重复注册
if (this.error_name == false) { // 只有当用户输入的用户名满足条件时才回去判断
let url = '/usernames/' + this.username + '/count/';
axios.get(url, {
responseType: 'json'
})
.then(response => {
if (response.data.count == 1) {
// 用户名已存在
this.error_name_message = '用户名已存在';
this.error_name = true;
} else {
// 用户名不存在
this.error_name = false;
}
})
.catch(error => {
console.log(error.response);
})
}
},
// 校验密码
check_password() {
let re = /^[0-9A-Za-z]{8,20}$/;
if (re.test(this.password)) {
this.error_password = false;
} else {
this.error_password = true;
}
},
// 校验确认密码
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;
}
// 判断手机号是否重复注册
if (this.error_mobile == false) {
let url = '/mobiles/' + this.mobile + '/count/';
axios.get(url, {
responseType: 'json'
})
.then(response => {
if (response.data.count == 1) {
this.error_mobile_message = '手机号已存在';
this.error_mobile = true;
} else {
this.error_mobile = false;
}
})
.catch(error => {
console.log(error.response);
})
}
},
// 校验图形验证码吗
check_image_code() {
if (this.image_code.length != 4) {
this.error_image_code_message = '请输入图形验证码';
this.error_image_code = true;
} else {
this.error_image_code = false;
}
},
// 校验短信验证码
check_sms_code() {
if (this.sms_code.length != 6) {
this.error_sms_code_message = '请填写短信验证码';
this.error_sms_code = true;
} else {
this.error_sms_code = false;
}
},
// 校验是否勾选协议
check_allow() {
if (!this.allow) {
this.error_allow = true;
} else {
this.error_allow = false;
}
},
// 监听表单提交事件
on_submit() {
this.check_username();
this.check_password();
this.check_password2();
this.check_mobile();
this.check_sms_code();
this.check_allow();
// 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_sms_code == true || this.error_allow == true) {
// 禁用掉表单的提交事件
window.event.returnValue = false;
}
},
}
});
```python
from django import http
from users.models import User
from django.http import HttpResponse
from django.shortcuts import render
import re
# Create your views here.
from django.views import View
from django.db import DatabaseError
class RegisterView(View):
def get(self, request):
return render(request, 'register.html')
def post(self, request):
# 获取参数
username = request.POST.get('username')
password = request.POST.get('password')
password2 = request.POST.get('password2')
mobile = request.POST.get('mobile')
allow = request.POST.get('allow')
# 校验参数
if not all([username, password, password2, mobile, allow]):
return http.HttpResponseForbidden('缺少必传参数')
if not re.match(r'^[a-zA-Z0-9_-]{5,20}$', username):
return http.HttpResponseForbidden('请输入5-20个字符的用户名')
if not re.match(r'^[0-9A-Za-z]{8,20}$', password):
return http.HttpResponseForbidden('请输入8-20位的密码')
# 判断两次密码是否一致
if password != password2:
return http.HttpResponseForbidden('两次输入的密码不一致')
# 判断手机号是否合法
if not re.match(r'^1[3-9]\d{9}$', mobile):
return http.HttpResponseForbidden('请输入正确的手机号码')
if allow != 'on':
return http.HttpResponseForbidden('请勾选用户协议')
try:
User.objects.create_user(username=username, password=password, mobile=mobile)
except DatabaseError:
return render(request, 'register.html', {'register_errmsg': '注册失败'})
return http.HttpResponse('注册成功，重定向回首页')
```
