博客园用户注册（钩子待更新）
页面注册的样式
先去用inpu标签写出样式，可以看到我们把上传头像的样式做成了一个图片的样式，点击图片就能上传图像了。这里面的原理就是利用了相对的位置，其实在图像的位置上还有一个file类型的input框，我们只是把input标签的长宽都设置成跟图像大小样式的，在把input标签的透明度设置为0，所以看到的样式就是点击了图片就能上传图像。
!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <style> body { background-color: #eeeeee; } .first_row { margin-top: 100px; } #Avatar_File,#Avatar_img{ width: 60px; height: 60px; position: absolute; left: 150px; } #Avatar_File{ opacity: 0; } .avatar_box{ position: relative; margin-bottom: 60px; } </style> </head> <body> <div class="container"> <div class="row first_row"> <div class="col-md-6 col-md-offset-3 "> <h1 class="text-center">注册页面</h1> <form class="form-horizontal"> <div class="form-group"> <label for="user" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="user" placeholder="user"> </div> </div> <div class="form-group"> <label for="PassWord" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="PassWord" placeholder="Password"> </div> </div> <div class="form-group"> <label for="PassWordRepeat" class="col-sm-2 control-label">确认密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="PassWordRepeat" placeholder="PassWordRepeat"> </div> </div> <div class="form-group"> <label for="Email" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="Email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="avatar_box" class="col-sm-2 control-label">上传头像</label> <div class="avatar_box"> <img src="/static/default.png/" id="Avatar_img"> <input type="file" class="form-control" id="Avatar_File" placeholder="File"> </div> </div> <div class="form-group"> <label for="Valid" class="col-sm-2 control-label">验证码</label> <div class="row"> <div class="col-md-4"> <input type="text" class="form-control" id="Valid" placeholder="Valid"> </div> <div class="col-md-4"> <img src="/get_valid_img/" id="valid_img"> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div> </div> </div> </body> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script> // 刷新验证码 $("#valid_img").click(function () { $(this)[0].src+="?" }); //头像预览 $("#Avatar_File").change(function () { //获取当前上传的文件 var file = $(this)[0].files[0]; console.log(file); //读取文件的url var reader= new FileReader(); reader.readAsDataURL(file); //阅读文件完成后触发的事件 reader.onload=function () { $("#Avatar_img").attr("src",this.result) } }) </script> </html>
实现头像预览就是拿到上传图片的url，然后赋值给对应的img标签的src，此时页面就会显示出了头像。
利用form组件替换input标签
在app01的文件下创建一个form的py文件
from django import forms from django.forms import widgets class RegForm(forms.Form): user =forms.CharField(min_length=5,max_length=12, error_messages={"min_length":"最小长度为5"}, widget=widgets.TextInput(attrs={"class":"form-control","placeholder":"user"})) pwd= forms.CharField(min_length=6, error_messages={"min_length":"最小长度为5"}, widget=widgets.PasswordInput(attrs={"class":"form-control","placeholder":"Password"})) pwdrepeat = forms.CharField(min_length=6, error_messages={"min_length": "最小长度为5"}, widget=widgets.PasswordInput(attrs={"class": "form-control", "placeholder": "PassWordRepeat"})) email =forms.EmailField(error_messages={"invalid":"格式错误!"}, widget=widgets.EmailInput(attrs={"class":"form-control","placeholder":"Email"})) valid_code=forms.CharField(widget=widgets.TextInput(attrs={"class":"form-control","placeholder":"Valid"}))
在views中引入一下，传入到页面文件中
from app01.form import RegForm def register(request): regform = RegForm() return render(request,"register.html",{"regform":regform})
在页面作文中直接带入到注册的页面中
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <style> body { background-color: #eeeeee; } .first_row { margin-top: 60px; } #Avatar_File,#Avatar_img{ width: 60px; height: 60px; position: absolute; left: 150px; } #Avatar_File{ opacity: 0; } .avatar_box{ position: relative; margin-bottom: 60px; } </style> </head> <body> <div class="container"> <div class="row first_row"> <div class="col-md-6 col-md-offset-3 "> <h1 class="text-center">注册页面</h1> <form class="form-horizontal"> <div class="form-group"> <label for="user" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> {{ regform.user }} </div> </div> <div class="form-group"> <label for="PassWord" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> {{ regform.pwd }} </div> </div> <div class="form-group"> <label for="PassWordRepeat" class="col-sm-2 control-label">确认密码</label> <div class="col-sm-10"> {{ regform.pwdrepeat }} </div> </div> <div class="form-group"> <label for="Email" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> {{ regform.email }} </div> </div> <div class="form-group"> <label for="avatar_box" class="col-sm-2 control-label">上传头像</label> <div class="avatar_box"> <img src="/static/default.png/" id="Avatar_img"> <input type="file" class="form-control" id="Avatar_File" placeholder="File"> </div> </div> <div class="form-group"> <label for="Valid" class="col-sm-2 control-label">验证码</label> <div class="row"> <div class="col-md-4"> {{ regform.valid_code }} </div> <div class="col-md-4"> <a href="#"><img src="/get_valid_img/" id="valid_img"></a> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="button" class="btn btn-success regbtn" value="提交"> </div> </div> </form> </div> </div> </div> </body> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script> // 刷新验证码 $("#valid_img").click(function () { $(this)[0].src+="?" }); //头像预览 $("#Avatar_File").change(function () { //获取当前上传的文件 var file = $(this)[0].files[0]; console.log(file); //读取文件的url var reader= new FileReader(); reader.readAsDataURL(file); //阅读文件完成后触发的事件 reader.onload=function () { $("#Avatar_img").attr("src",this.result) } }) </script> </html>
点击提交按钮，利用ajax向服务端发送用户输入的数据包括图片数据
<script> // 刷新验证码 $("#valid_img").click(function () { $(this)[0].src+="?" }); //头像预览 $("#Avatar_File").change(function () { //获取当前上传的文件 var file = $(this)[0].files[0]; console.log(file); //读取文件的url var reader= new FileReader(); reader.readAsDataURL(file); //阅读文件完成后触发的事件 reader.onload=function () { $("#Avatar_img").attr("src",this.result) } }); //发送数据 $(".regbtn").click(function () { var $formData = new FormData(); ##创建一个专门存放form表单数据的容器 $formData.append("user",$("#id_user").val()); $formData.append("pwd",$("#id_pwd").val()); $formData.append("pwdrepeat",$("#id_pwdrepeat").val()); $formData.append("email",$("#id_email").val()); $formData.append("valid_code",$("#id_valid_code").val()); var file =$("#Avatar_File")[0].files[0] ; $formData.append("file_img",file); $formData.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val()); $.ajax({ url:"/register/", type:"post", data:$formData, processData:false, contentType:false, success:function (data) { if (data.user){ console.log("ok") }else{ console.log(data.errors) } } }) }) </script>
在后台对数据进行验证（查看django的form表单）
from app01.form import RegForm def register(request): if request.is_ajax(): regForm = RegForm(request.POST) #把拿到的结果进行实例化 regResponse ={"user":None,"errors":None} if regForm.is_valid(): data = regForm.cleaned_data user =data.get("user") pwd =data.get("pwd") email =data.get("email") print(data) avatar_img=request.FILES.get("file_img") user_obj= UserInfo.objects.create_user(username=user,password=pwd,email=email,avatar=avatar_img) regResponse["user"]=user ##存入数据 else: regResponse["errors"]=regForm.errors #拿到错误的信息 print(regForm.errors) return JsonResponse(regResponse) regform = RegForm() return render(request,"register.html",{"regform":regform})
以上已经可以完成注册新用户，下一步要对用户输入的创建信息进行验证并且把不符合规定的数据提示在页面上。
把错误信息打印到页面，需要在页面中加一个span标签，然后用ajax去遍历得到的字典，把对应的标签加上相应的字段
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<style>
body {
background-color: #eeeeee;
}
.first_row {
margin-top: 60px;
}
#Avatar_File,#Avatar_img{
width: 60px;
height: 60px;
position: absolute;
left: 150px;
}
#Avatar_File{
opacity: 0;
}
.avatar_box{
position: relative;
margin-bottom: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="row first_row">
<div class="col-md-6 col-md-offset-3 ">
<h1 class="text-center">注册页面</h1>
<form class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="user" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
{{ regform.user }} <span></span>
</div>
</div>
<div class="form-group">
<label for="PassWord" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
{{ regform.pwd }} <span></span>
</div>
</div>
<div class="form-group">
<label for="PassWordRepeat" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
{{ regform.pwdrepeat }} <span></span>
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
{{ regform.email }} <span></span>
</div>
</div>
<div class="form-group">
<label for="avatar_box" class="col-sm-2 control-label">上传头像</label>
<div class="avatar_box">
<img src="/static/default.png/" id="Avatar_img">
<input type="file" class="form-control" id="Avatar_File" placeholder="File">
</div>
</div>
<div class="form-group">
<label for="Valid" class="col-sm-2 control-label">验证码</label>
<div class="row">
<div class="col-md-4">
{{ regform.valid_code }} <span></span>
</div>
<div class="col-md-4">
<a href="#"><img src="/get_valid_img/" id="valid_img"></a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-success regbtn" value="提交">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
// 刷新验证码
$("#valid_img").click(function () {
$(this)[0].src+="?"
});
//头像预览
$("#Avatar_File").change(function () {
//获取当前上传的文件
var file = $(this)[0].files[0];
console.log(file);
//读取文件的url
var reader= new FileReader();
reader.readAsDataURL(file);
//阅读文件完成后触发的事件
reader.onload=function () {
$("#Avatar_img").attr("src",this.result)
}
});
//发送数据
$(".regbtn").click(function () {
var $formData = new FormData();
$formData.append("user",$("#id_user").val());
$formData.append("pwd",$("#id_pwd").val());
$formData.append("pwdrepeat",$("#id_pwdrepeat").val());
$formData.append("email",$("#id_email").val());
$formData.append("valid_code",$("#id_valid_code").val());
var file =$("#Avatar_File")[0].files[0] ;
$formData.append("file_img",file);
$formData.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
$.ajax({
url:"/register/",
type:"post",
data:$formData,
processData:false,
contentType:false,
success:function (data) {
if (data.user){
console.log("ok")
}else{
$.each(data.errors,function (i,j) {
console.log(i,j);
$("#id_"+i).next().html(j[0])
})
}
}
})
})
</script>
</html>
用each去遍历 得到i和j分别是键和值，不符合条件的内容打印出的样式
浙公网安备 33010602011771号