注冊{#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");

}

}

})

})

總結

以上是生活随笔為你收集整理的input失去焦点验证格式_input获取、失去焦点对输入内容做验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。