获取焦点
# 重新获取焦掉后,会将指定标签中的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>