获取焦点
# 重新获取焦掉后，会将指定标签中的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>
路由
自己去想吧，就是最简单的跳转，没有正则！！！