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

获取焦点

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

前端

"en">

    "UTF-8">
    


    "stylesheet" href="/static/css/bootstrap.min.css">
    "stylesheet" href="/static/css/backend.css">

    
class="container register">
        
class="row">
            
class="col-md-6 col-md-offset-3">
{#                form添加novalidate参数，代表取消前端h5的验证，比如邮箱格式验证#}
                
"/register/" method="post" class="form-horizontal" enctype="multipart/form-data">
                    {% csrf_token %}
                    
class="form-group">
                        for="{{ form_obj.username.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.username.label }}
                        
                        
class="col-sm-8">
                            {{ form_obj.username }}
                            class="help-block">{{ form_obj.username.errors.0 }}
                        
                    


                    
class="form-group">
                        for="{{ form_obj.password.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.password.label }}
                        
                        
class="col-sm-8">
                            {{ form_obj.password }}
                            class="help-block">{{ form_obj.password.errors.0 }}
                        
                    

                    
class="form-group">
                        for="{{ form_obj.re_password.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.re_password.label }}
                        
                        
class="col-sm-8">
                            {{ form_obj.re_password }}
                            class="help-block">{{ form_obj.re_password.errors.0 }}
                        
                    

                    
class="form-group">
                        for="{{ form_obj.email.id_for_label }}" class="col-sm-2 control-label">
                            {{ form_obj.email.label }}
                        
                        
class="col-sm-8">
                            {{ form_obj.email }}
                            class="help-block">{{ form_obj.email.errors.0 }}
                        
                    

                    
class="form-group">
                        class="col-sm-2 control-label">
                            头像
                        
                        
class="col-sm-8">
                            for="id_avatar">"avatar-img" src="/static/img/default.png">
                            "file" id="id_avatar" style="display: none;" name="avatar" accept="image/*">
                        
                    

                    
class="form-group">
                        
class="col-sm-offset-2 col-sm-8">
                            "reg-submit" type="button" class="btn btn-success">注册
                        
                    
                
            
        
    



{#    #}
    
    

register.html

路由

自己去想吧，就是最简单的跳转，没有正则！！！

 

转载于:https://www.cnblogs.com/ttyypjt/p/10594117.html