以下是我的代码，我利用ajax传递数据，但前端页面上为什么没有弹出短信验证码的错误？
前端代码
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1,user-scalable=no">
<title>注册</title>
{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css'%}">
<link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css'%}">
<link rel="stylesheet"
href="{% static 'plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css'%}">
</head>
<body>
<div class="account">
<h2 style="text-align:center;">用户注册</h2>
<form id="regForm" method="POST" style="margin-top:20px;" novalidate>
{% csrf_token %}
{% for field in form %}
{% if field.name == 'code' %}
<div class="form-group" style="margin-top:20px;">
<label> {{ field.label}}</label>
<div class="clearfix">
<div class="col-md-6" style="padding:0;">{{field}}</div>
<div class="col-md-6"><input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码"></div>
</div>
<span class="error-msg" style="color:red;position:absolute"></span>
</div>
{% else %}
<div class="form-group" style="margin-top:20px;">
<label> {{ field.label}}</label>
{{field}}
<span class="error-msg" style="color:red;position:absolute"></span>
{% endif %}
{%endfor%}
<input id="btnSubmit" style="height:35px;width:200px; margin-left:90px; font-size:17px;" type="button" value="注册"
class="btn btn-info">
<div>
<span style="float: right; margin-top:20px;">已有账号.<a style=" text-decoration:none;" href=" ">去登录</a ></span>
</div>
</div>
</form>
</div>
<script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js'%}"></script>
<script>
//页面加载完自动执行函数
$(function(){
bindClickBtnSms();
bindClickSubmit();
});
//点击提交注册
function bindClickSubmit() {
$('#btnSubmit').click(function(){
$(".error-msg").empty();
//收集数据
//发送到后台
$.ajax({
url:"/register/",
type:"post",
data:$('#regForm').serialize(),
dataType:"json",
success:function(res){
if(res.success){
location.href=res.data;
}else{
//错误信息
$.each(res.error,function(key,value){
$('#id_'+key).next().text(value[0]);
})
}
}
})
})
}
</script>
</body>
</html>
后端代码
def register(request):
"""注册"""
if request.method == 'GET':
form = RegisterForm()
return render(request, 'register.html', {'form': form})
form = RegisterForm(data=request.POST)
if form.is_valid():
# 验证通过，写入数据库
form.save()
return JsonResponse({'success': True, 'data': '/login/'})
return JsonResponse({'success': False, 'error': form.errors})
class RegisterForm(BootStrapModelForm):
password = forms.CharField(
label="密码",
widget=forms.PasswordInput(),
min_length=8,
max_length=20,
error_messages={
'min_length': "密码长度不能小于8个字段",
'max_length': "密码长度不能大于20个字段",
})
confirm_password = forms.CharField(label="确认密码", widget=forms.PasswordInput())
mobile = forms.CharField(label="手机号",
validators=[RegexValidator(r'^(1[3|4|5|6|7|8|9])\d{9}$', '手机号格式错误'), ])
code = forms.CharField(label="短信验证码")
class Meta:
model = models.Username
fields = ['username', 'email', 'password', 'confirm_password', 'mobile', 'code']
错误
