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>
register.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 ...
随机推荐
- pyinstaller 打包
[root@mhc nsf]# pip install pyinstallerCollecting pyinstaller Downloading PyInstaller-3.3.tar.gz (3 ...
- linux系统启动过程及运行等级详解
一.启动过程 1. 开机流程简述 1)加载BIOS硬件信息,并获取第一个启动设备的代号 2)读取第一个启动设备的MBR的引导加载程序的启动信息 3)加载核心操作系统的核心信息,核心开始解压缩,并且尝试 ...
- 登录模块（前端bookstrapValidator校验+加密+后台加密+后台验证）
package sysone.zr.com.controller; import java.io.IOException; import javax.servlet.http.HttpServletR ...
- C++ std::vector
std::vector template < class T, class Alloc = allocator<T> > class vector; // generic te ...
- 移动端flexbox的小tips
我也是看了腾讯isux的博客,解答了我关于flexbox一个很长时间的疑惑,就是flex布局在安卓手机会出现内容长短不同导致不均分的现象. 具体的内容可以去看腾讯isux的博客,地址在这:https: ...
- code1043 方格取数
第一次走用dfs枚举每种情况,第二次走用dp求剩下的最大值 设一个点集q用来保存有价值的点,排序,在最后加一个终点:x=m+1,y=m+1,v=0 //m是矩阵长宽 因为v=0的点是没有意义的,所以 ...
- 洛谷 P2986 [USACO10MAR]伟大的奶牛聚集Great Cow Gat…（树规）
题目描述 Bessie is planning the annual Great Cow Gathering for cows all across the country and, of cours ...
- [BAT] 以当前时间为名创建文件夹，将本地文件夹里的文件拷贝到远程共享目录，而且保证本地和Jenkins上运行都成功
@echo off rem connect to szotpc801 net use * /del /yes NET USE X: \\10.66.234.95\d$ Autotest123 /use ...
- 一个新手后端需要了解的前端核心知识点之margin（二）
最近以开发自己博客网站为出发点开始决心打牢几个非常重要的前端知识点: margin,这个在我刚刚接触编程的时候留下的困扰的东西,一开始只想着怎么快速开发自己的网站,别人的终归是别人的,想要挖墙脚,必须 ...
- Photo4
Story: 我手捧玫瑰,一个人,走在桥上.桥下是波澜壮阔的大海,一不小心,我就有失足的危险.海鸟的低鸣在我耳际盘旋着,浪汹涌,仿佛要把我吞噬掉.你也许奇怪,为何我一人手捧玫瑰走在桥上.只因,女骑从来 ...