獲取焦點
# 重新獲取焦掉后，會將指定標簽中的css樣式刪除，這里為標記錯誤的css樣式（將文本框標紅）
$("form input").focus(function () { $(this).next().text("").parent().parent().removeClass("has-error"); })
失去焦點
# 這里過程為，ajax將數據提交給后台，后台在models中查詢，若查詢到，data.status=1，提示錯誤，反之，則無作為。
$("#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");
// 這里為將錯誤信息賦值給span標簽，並且將整個input標簽設置為紅色 } } }) })
后台函數views.py
def check_username_exist(request): ret = {"status": 0, "msg": ""} username = request.GET.get("username") check_username = models.UserInfo.objects.filter(username=username) # print(check_username) if check_username: ret["status"] = 1 ret["msg"] = "該用戶名已經存在！" return JsonResponse(ret)
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注冊</title> </head> <body> <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/css/backend.css"> <div class="container register"> <div class="row"> <div class="col-md-6 col-md-offset-3"> {# form添加novalidate參數，代表取消前端h5的驗證，比如郵箱格式驗證#} <form novalidate action="/register/" method="post" class="form-horizontal" enctype="multipart/form-data"> {% csrf_token %} <div class="form-group"> <label for="{{ form_obj.username.id_for_label }}" class="col-sm-2 control-label"> {{ form_obj.username.label }} </label> <div class="col-sm-8"> {{ form_obj.username }} <span class="help-block">{{ form_obj.username.errors.0 }}</span> </div> </div> <div class="form-group"> <label for="{{ form_obj.password.id_for_label }}" class="col-sm-2 control-label"> {{ form_obj.password.label }} </label> <div class="col-sm-8"> {{ form_obj.password }} <span class="help-block">{{ form_obj.password.errors.0 }}</span> </div> </div> <div class="form-group"> <label for="{{ form_obj.re_password.id_for_label }}" class="col-sm-2 control-label"> {{ form_obj.re_password.label }} </label> <div class="col-sm-8"> {{ form_obj.re_password }} <span class="help-block">{{ form_obj.re_password.errors.0 }}</span> </div> </div> <div class="form-group"> <label for="{{ form_obj.email.id_for_label }}" class="col-sm-2 control-label"> {{ form_obj.email.label }} </label> <div class="col-sm-8"> {{ form_obj.email }} <span class="help-block">{{ form_obj.email.errors.0 }}</span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"> 頭像 </label> <div class="col-sm-8"> <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png"></label> <input type="file" id="id_avatar" style="display: none;" name="avatar" accept="image/*"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-8"> <button id="reg-submit" type="button" class="btn btn-success">注冊</button> </div> </div> </form> </div> </div> </div> {# <script src="/static/js/bootstrap.min.js"></script>#} <script src="/static/js/jquery-1.12.4.js"></script> <script> $("#id_avatar").change(function () { // 創建一個文件讀取對象 var fileReader = new FileReader; // 在更改前端圖片之前，把文件內容讀取完 fileReader.readAsDataURL(this.files[0]); // 讀取文件是需要時間的 // 文件讀取完后，重新加載到img當中 fileReader.onload = 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"); } } }) }) </script> </body> </html>
路由
自己去想吧，就是最簡單的跳轉，沒有正則！！！