input获取、失去焦点对输入内容做验证

最新推荐文章于 2023-04-27 09:55:28 发布

weixin_33901843

最新推荐文章于 2023-04-27 09:55:28 发布

阅读量5.3k

点赞数

文章标签： javascript 前端后端 ViewUI

原文链接：http://www.cnblogs.com/ttyypjt/p/10594117.html

版权

获取焦点

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

最低0.47元/天解锁文章

weixin_33901843

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
input获取、失去焦点对输入内容做验证

获取焦点# 重新获取焦掉后，会将指定标签中的css样式删除，这里为标记错误的css样式（将文本框标红）$("form input").focus(function () { $(this).next().text("").parent().parent().removeClass("has-error"); })失去焦点# 这里过...
复制链接

扫一扫