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 ...
随机推荐
- 通过devtools在centos系统中启用高版本的gcc
C++11出来好久了,现在还是使用c++03的,需要在centos6.6的系统上实现gcc的升级,又不想自己编译代码. 于是选用了devtoolsset系列,安装脚本如下 安装脚本如下 functio ...
- flask 启动
export SECRET_KEY=qq77aa88 export MAIL_SERVER=smtp.qq.com export MAIL_USERNAME=591867837@qq.com expo ...
- render组件
[render组件] Render继承于Component. It contians general functionality for all renderers. A renderer is wh ...
- Excel VBA入门（一）数据类型
与其它的编程语言一样,VBA也有它自己的数据类型.讲到数据类型,就离不开"变量"与"常量"这两个概念,变量与常量,都是用于保存数据的.顾名思义,"变量 ...
- 148. Sort List (List)
Sort a linked list in O(n log n) time using constant space complexity. 法I:快排.快排的难点在于切分序列.从头扫描,碰到> ...
- java web框架发展的新趋势--跨界轻型App
“跨界(cross over)在汽车界已然成风,将轿车.SUV.跑车和MPV等多种不同元素融为一体的混搭跨界车型,正在成为汽车设计领域的新趋势.从个人而言,当包容.多元的审美要求和物质要求越来越强烈时 ...
- 78. Subsets 求所有子集（有重复就continue）
［抄题］: Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The ...
- 使用lucene query的CharFilter 去掉字符中的script脚本和html标签
1.准备数据,这里我从数据库读取一个带有html标签和script脚本的数据
- rtx 导出所有部门和用户
1>添加Interop.RTXServerApi.dll的引用 2>RTXServerApi.RTXObjectClass和RTXServerApi.RTXObject实现一样,建议使用R ...
- Linux cheat命令
一.简介 cheat是在GNU通用公共许可证下,为Linux命令行用户发行的交互式备忘单应用程序.它提供显示Linux命令使用案例,包括该命令所有的选项和简短但尚可理解的功能. 二.安装配置 安装步骤 ...