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 ...
随机推荐
- Java中Final修饰一个变量时，是引用不能变还是引用的对象不能变
Java中,使用Final修饰一个变量,是引用不能变,还是引用对象不能变? 是引用对象的地址不能变,引用变量所指的对象的内容可以改变. final变量永远指向这个对象,是一个常量指针,而不是指向常量的 ...
- Python基础：函数的介绍及应用
# 函数的定义 def firstFun(): print("----------------------") print("剑来") print(" ...
- PHPStorm+XDEBUG 调试Laravel
首先输出phpinfo(); https://xdebug.org/wizard.php 打开然后查看适合你的调试扩展版本 ,目前支持到php7.2 整个页面ctrl+a 复制进去 然后下载 扩展文 ...
- Python——字典与字典方法
字典是一种通过名字或者关键字引用的得数据结构,其键可以是数字.字符串.元组,这种结构类型也称之为映射.字典类型是Python中唯一內建的映射类型,基本的操作包括如下: (1)len():返回字典中键— ...
- spring4-1-Spring的简单介绍
Spring4.0 是 Spring 推出的一个重大版本升级,进一步加强了 Sring 作为 Java 领域第一开源平台的地位.Spring4.0 引入了众多 Java 开发者期盼的新特性,如泛型依赖 ...
- ZPL语言说明文档
■格式命令(format commands) 以︿开始 用于设定标签格式与数据 多条格式指令按顺序执行 ■控制指令(control commands) 以~开始 迫使打印机立即执行某一个指令的操作 可 ...
- [Jenkins] Jenkins 执行 Composite 模式的 SoapUI Project
cd %WORKSPACE% cmd /c call "D:\Program Files\SmartBear\ReadyAPI-1.3.1\bin\testrunner.bat" ...
- Sublime Text 3 -mac简体中文汉化包下载及教程
Sublime Text 3下载 官方下载地址:http://www.sublimetext.com/3 汉化包链接 1.将上面要求下载的sublime_text_3.zip 文件解压,得到的Defa ...
- HttpContext.Current.Session[strName]未将对象引用设置到对象的实例
项目开发是在4.5.1上,不知道为啥客户提供的服务器上安装的是4.5,差别不大也没去升级,然后部署MVC的时候web.config报错 <system.web> <compilati ...
- [干货来袭]C#7.0新特性(VS2017可用)(转)
出处:http://www.cnblogs.com/GuZhenYin/p/6526041.html 微软昨天发布了新的VS 2017 ..随之而来的还有很多很多东西... .NET新版本 ASP.N ...