注册{#form添加novalidate参数，代表取消前端h5的验证，比如邮箱格式验证#}{% csrf_token %}
{{ form_obj.username.label }}
{{ form_obj.username }}{{ form_obj.username.errors.0 }}
{{ form_obj.password.label }}
{{ form_obj.password }}{{ form_obj.password.errors.0 }}
{{ form_obj.re_password.label }}
{{ form_obj.re_password }}{{ form_obj.re_password.errors.0 }}
{{ form_obj.email.label }}
{{ form_obj.email }}{{ form_obj.email.errors.0 }}
头像
注册
{##}
var fileReader=new FileReader;//在更改前端图片之前，把文件内容读取完
fileReader.readAsDataURL(this.files[0]);//读取文件是需要时间的//文件读取完后，重新加载到img当中
fileReader.οnlοad=function () {
$("#avatar-img").attr("src", fileReader.result);
}
});
$("#reg-submit").click(function () {
var formData=new FormData;
formData.append("username", $("#id_username").val());
formData.append("password", $("#id_password").val());
formData.append("re_password", $("#id_re_password").val());
formData.append("email", $("#id_email").val());// 这里传递的是文件对象，是为了能够定位文件,后台获取到这个文件对象后会通过models字段单中的upload_to="avator"参数传递到服务器目录。
formData.append("avatar", $("#id_avatar")[0].files[0]);
formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
$.ajax({
url:"/register/",
type:"post",//当需要传输图片的时候，需要将processData和contentType设置为false
processData: false,
contentType: false,
data: formData,
success:function (data) {// 这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"}if(data.status){//有错误就展示错误//console.log(data.msg);//将报错信息填写到页面上
$.each(data.msg, function (k,v) {// console.log("id_"+k, v[0]);// console.log($("#id_"+k));
$("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
})//console.log(123)
}else{// 没有错误就跳转到指定页面，这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"}
location.href=data.msg;
}
}
})
});//当input获取焦点的事件，移除报错的样式，并且晴空报错信息。
$("form input").focus(function () {
$(this).next().text("").parent().parent().removeClass("has-error");
})
$("#id_username").blur(function () {
var username=$(this).val();
$.ajax({
url:"/check_username_exist/",
type:"get",
data: {"username": username},
success: function (data) {if(data.status){//$("#id_username").next.text(data.msg).parentElement().parentElement().addClass("has-error");//上面为错误写法
$("#id_username").next().text(data.msg).parent().parent().addClass("has-error");
}
}
})
})
