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 ...
随机推荐
- iOS学习之UIPickerView控件的简单使用
UIPickerView控件在给用户选择某些特定的数据时经常使用到,这里演示一个简单的选择数据,显示在UITextField输入框里,把UIPickerView作为输入View,用Toolbar作为选 ...
- 一条跨库更新数据的sql
UPDATE [db1].[dbo].[R_ResAndBook] SET SectionID=TT2.newsecidFROM [SmartCampus].[dbo].[R_ResAndBo ...
- Sqlserver中查找包含某一列的所有的表
select cols.name,cols.id,objs.name,objs.id from syscolumns cols INNER JOIN sysobjects objs on cols.i ...
- 前端开发之HTML篇二
主要内容: 一.表格标签 -- table 二.表单标签 -- form 三.常用标签属性和分类 四.标签嵌套规则 1️⃣ 表格标签 -- table 表格由<table> 标签来定义. ...
- 用Box2d物理引擎设计类似愤怒小鸟投篮游戏 物理引擎的引入和基本框架搭建
- qmake not exec in ubuntu
Description Today, I want to run qmake command in terminal, but, it has error message such qmake: co ...
- C#根据URL生成签名
代码: using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptog ...
- Java泛型：泛型的定义（类、接口、对象）、使用、继承
地址 http://blog.csdn.net/lirx_tech/article/details/51570138 1. 设计泛型的初衷: 1) 主要是为了解决Java容器无法记忆元素类型的问题 ...
- Maven远程发布项目到tomcat
向tomcat发布项目,每次都要打包传送再运行,非常麻烦.偶然一天发现maven有插件可以直接发布到tomcat.今天把大体过程介绍给大家. 首先在pom中配置tomcat插件: <plugin ...
- 3.1.5 倒计时器：CountDownLatch
package 第三章.倒计时器CountDownLatch; import java.util.concurrent.CountDownLatch; /** * Created by zzq on ...