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)

前端

<!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>

路由

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

input获取、失去焦点对输入内容做验证的更多相关文章

当input获取倒焦点的时候，获得输入内容
描述:当用户点击输入框时,获取到他在input里输入的内容 $().keyup(function(){ $(this).val(); }) $(this).val()==this.value; $(t ...
小程序input组件获得焦点时placeholder内容有重影
这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...
react input 获取/失去焦点
<div className={ this.state.focus ? "dis_bottom_left_onfocus" : "dis_bottom_left&q ...
js捕获回车事件，并且获取每一条输入内容
<body> <div style="width: 200px; height: 20px;"> <textarea id="inputVa ...
input获取永久焦点
$(function () { $('#test').blur(function () { var that = this; //或者用闭包 setTimeout(function () { $(th ...
一个input输入内容监听联动的demo
两个input,一个在其中一个输入,内容在另一个input中实时回显代码如下 <!DOCTYPE html> <html> <head> <title> ...
实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件
页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...
使用iScroll时，input等不能输入内容的解决方法
做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...

随机推荐

Excel VBA入门（六）过程和函数
前面讲过,VBA代码有两种组织形式,一种就是过程(前面的示例中都在使用),另一种就是函数.其实过程和函数有很多相同之处,除了使用的关键字不同之外,还有不同的是: 函数有返回值,过程没有函数可以在Ex ...
css实现文本过长时自动添加省略号
1. 效果 2. Html <div id="main_app_content" class="container"> <div class= ...
SQLSERVER 建立全文检索
-- 创建测试表 -- DROP TABLE FullTextIndexing CREATE TABLE FullTextIndexing ( ID INT IDENTITY(1,1) NOT N ...
【FZU2178】礼物分配
题意在双胞胎兄弟Eric与R.W的生日会上,他们共收到了N个礼物,生日过后他们决定分配这N个礼物(numv+numw=N).对于每个礼物他们俩有着各自心中的价值vi和wi,他们要求各自分到的礼物数目 ...
解剖Nginx·模块开发篇（5）解读内置非默认模块 ngx_http_stub_status_module
1 Background ngx_http_stub_status_module 是一个 Nginx 的内置 HTTP 模块,该模块可以提供 Nginx 的状态信息.默认情况下这个模块是不被编译进来的 ...
Opencv Canny
#include <iostream>#include <opencv2/opencv.hpp> using namespace std;using namespace cv; ...
CSS块级元素、内联元素概念[转]
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
EZOJ #226
传送门分析我们可以建一个k层图,把dp转移的三维对应到每个点上,每个第k层点连向0层点我们让第0层点为实点其余为虚点,只要碰到虚点就dfs到他连得所有实点再将实点入队即可代码 #include ...
thinkpad t480s重装win10后小红点失灵无法启用
问题描述: thinkpad t480s重装win10纯净版系统后,小红点失效,控制面板中Track Point设置页面被禁用. 解决方法: 可打开下述网址,下载并安装TrackPoint Firmw ...
ThinkPhp数据缓存技术
1.缓存初始化在 ThinkPHP 中,有一个专门处理缓存的类:Cache.class.php(在Thinkphp/Library/Think/cache.class.php,其他的各种缓存类也在这 ...

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

获取焦点

失去焦点

后台函数views.py

前端

路由

input获取、失去焦点对输入内容做验证的更多相关文章

随机推荐

热门专题