获取焦点

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

register.html

路由

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

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

  1. 当input获取倒焦点的时候,获得输入内容

    描述:当用户点击输入框时,获取到他在input里输入的内容 $().keyup(function(){ $(this).val(); }) $(this).val()==this.value; $(t ...

  2. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  3. react input 获取/失去焦点

    <div className={ this.state.focus ? "dis_bottom_left_onfocus" : "dis_bottom_left&q ...

  4. js捕获回车事件,并且获取每一条输入内容

    <body> <div style="width: 200px; height: 20px;"> <textarea id="inputVa ...

  5. input获取永久焦点

    $(function () { $('#test').blur(function () { var that = this; //或者用闭包 setTimeout(function () { $(th ...

  6. 一个input输入内容监听联动的demo

    两个input,一个在其中一个输入,内容在另一个input中实时回显 代码如下 <!DOCTYPE html> <html> <head> <title> ...

  7. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  8. js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

    页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...

  9. 使用iScroll时,input等不能输入内容的解决方法

    做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowForm ...

随机推荐

  1. linux查看电脑硬件配置

    1. 查看CPU cat /proc/cpuinfo 2. 查看内存 free -m 3. 查看硬盘分区 fdisk -l 4. 查看网卡信息或者ip地址 ifconfig 5. 查看详细的网卡工作模 ...

  2. dbcm with kubenetes

    1. create consul # kcompose convert -f /root/gitSwarm/dbcm-base-managers/compose/consul.yml genetate ...

  3. apt 查询软件

    apt-cache search percona-server apt list percona-server-server-5.6

  4. EMC校招笔试题目

    ------------------------------------------------- 1,7×(1/7) = 1是什么率? 乘法运算满足结合律,交换律和分配率.这个题目用的应该是交换律. ...

  5. 编码总结,以及对BOM的理解

    一.前言 在跨平台.跨操作系统或者跨区域之间,经常会涉及到编码的问题,因为前段时间在项目中,遇到了因为编码而产生乱码的问题,以前对编码也是一知半解,所以决定对编码有一个更为深入的了解,因此才有了这篇自 ...

  6. ajax+servlet 简易时间效果

    <!DOCTYPE html> <html> <head> <title>index.html</title> <meta name= ...

  7. ubuntu 14.04 Clion2016.2 安装激活与安装后添加快捷启动方式

    参考链接:http://www.cnblogs.com/conw/p/5938113.html 下载clion for linux : http://www.jetbrains.com/clion/d ...

  8. Redis只作为缓存,不做持久化的配置

    #1.配置缓存内存限制和清理策略 #作为缓存服务器,如果不加以限制内存的话,就很有可能出现将整台服务器内存都耗光的情况,可以在redis的配置文件里面设置: #example: # 限定最多使用1.5 ...

  9. 冲刺NOIP2015提高组复赛模拟试题(五)2.道路修建

    2.道路修建 描述 Description liouzhou_101最悲痛的回忆就是NOI2011的道路修建,当时开了系统堆栈,结果无限RE… 出于某种报复心理,就把那题神奇了一下: 在 Z星球上有N ...

  10. linux下安装或升级GCC4.8.2,以支持C++11标准[转]

    在编译kenlm的时候需要安装gcc, 然后还需要安装g++. g++安装命令:sudo apt-get install g++ ----------------------以下为网上转载内容,加上自 ...