bootstrap表单带验证
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.bootstrap"></script>
<script src="../bootstrap/respond.min.bootstrap"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> <div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h2 class="page-header">注册</h2>
<form class="form-horizontal" action="bootstrap表单带验证.html" method="get">
<div class="form-group has-feedback">
<label for="email" class="col-sm-2 control-label">Email </label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email" required>
<span class=""></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="username" class="col-sm-2 control-label">username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="username" required>
<span class=""></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="password" class="col-sm-2 control-label">password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="password" required>
<span class=""></span>
</div>
</div>
<p class="text-right">
<button id="btnSubmit" type="submit" class="btn btn-primary">submit</button>
<button type="reset" class="btn btn-danger">reset</button>
</p>
</form>
</div>
</div> </div>
<script>
function checkInput(txt){
if(txt.val()==""){
// alert(txt.parent().parent().html()); alert html
txt.parent().parent() /*找到父类 先删除样式，再添加样式*/
.removeClass()
.addClass("form-group has-error has-feedback");
txt.next().removeClass()
.addClass("glyphicon glyphicon-remove form-control-feedback");
return false;
}else{
txt.parent().parent().removeClass().addClass("form-group has-success has-feedback");
txt.next().removeClass().addClass("glyphicon glyphicon-ok form-control-feedback");
return true;
}
}
function checkBind(id){
$(id).bind("blur", function () {
checkInput(id);
});
}
$().ready(function () {
checkBind($("#email"));
checkBind($("#username"));
checkBind($("#password"));
/* $("#email").bind("change", function () {
checkInput($("email"));
});*/ /* $("#email").change(function () {checkInput($("#email"));});
$("#username").change(function () {checkInput($("#username"));});
$("#password").change(function () {checkInput($("#password"));});*/ $("#btnSubmit").bind('click', function () {
if(checkInput($("#email"))&&checkInput($("#username"))&&checkInput($("#password"))){
return true;
}
return false;
})
});
</script> </body>
</html>
bootstrap表单带验证的更多相关文章
- Bootstrap 表单控件状态(验证状态)
在制作表单时,不免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果.1..has-warning:警告状态(黄色)2..has-error:错误状态(红色)3.. ...
- bootstrapValidator.js，最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- 基于Bootstrap表单验证
基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
- 测开之路一百一十一：bootstrap表单
bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...
- thinkphp表单自动验证
ThinkPHP框架表单验证 对注册到test表的表单进行验证 在注册之前要对表单进行验证: 用户名非空验证,两次输入密码必须一致即相等验证,年龄在18~50之间即范围验证,邮箱格式正则验证. 自动验 ...
随机推荐
- hibernate query.list() 返回的数据类型
在hibernate中,用hql语句查询实体类,采用list方法的返回结果为一个List,该List中封装的对象分为以下三种情况: 1.查询全部字段的情况下,如"from 实体类" ...
- dango foreign key 指定被引用模型的字段
用 to_field pool_no = models.ForeignKey('SimCardPool', verbose_name=u'卡池编号', db_column='pool_no', to_ ...
- NOSQL概要
NOSQL概要 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",泛指非关系型的数据库.NoSQL数据库的四大分类 键值(Key-Value)存储数 ...
- C#操作字符串方法总结<转>
staticvoid Main(string[] args) { string s =""; //(1)字符访问(下标访问s[i]) s ="ABCD"; Co ...
- linux线程的实现
首先从OS设计原理上阐明三种线程:内核线程.轻量级进程.用户线程 内核线程 内核线程就是内核的分身,一个分身可以处理一件特定事情.这在处理异步事件如异步IO时特别有用.内核线程的使用是廉价的,唯一使用 ...
- ASM:《X86汇编语言-从实模式到保护模式》第14章：保护模式下的特权保护和任务概述
★PART1:32位保护模式下任务的隔离和特权级保护 这一章是全书的重点之一,这一张必须要理解特权级(包括CPL,RPL和DPL的含义)是什么,调用门的使用,还有LDT和TSS的工作原理(15章着重 ...
- Games:取石子游戏（POJ 1067）
取石子游戏 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37662 Accepted: 12594 Descripti ...
- Android图片加载库：最全面的Picasso讲解
前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Pica ...
- [页面滚动到底部]jquery $(window).height()取值等于$(document).height()的问题
问题现象:JSP中头部引用了某个head.jsp,在videoList.jsp中生成片段时如下 实际最终生成的HTML如下: <!DOCTYPE html>没有解析到,原因找到了,先想办法 ...
- Hibernate 所有缓存机制详解
hibernate提供的一级缓存 hibernate是一个线程对应一个session,一个线程可以看成一个用户.也就是说session级缓存(一级缓存)只能给一个线程用,别的线程用不了,一级缓存就是和 ...