<!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表单带验证的更多相关文章

  1. Bootstrap 表单控件状态(验证状态)

    在制作表单时,不免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果.1..has-warning:警告状态(黄色)2..has-error:错误状态(红色)3.. ...

  2. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  3. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  4. EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

    带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...

  5. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  6. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  7. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  8. 测开之路一百一十一：bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

  9. thinkphp表单自动验证

    ThinkPHP框架表单验证 对注册到test表的表单进行验证 在注册之前要对表单进行验证: 用户名非空验证,两次输入密码必须一致即相等验证,年龄在18~50之间即范围验证,邮箱格式正则验证. 自动验 ...

随机推荐

  1. django-cms安装

    ubuntu:12.04 (32bit) djangocms 0.5.1 =========================== 首先,跟着这个做: https://github.com/divio/ ...

  2. JavaScript——Window对象

    1.serTimeout()和setinterval()可用于注册在指定的时间之后单词或者重复调用的函数. 2.window对象的location属性引用的是Location对象,表示该窗口当前显示的 ...

  3. 通过代理连接go01ge

     日本:https://pac.mcplay.cn/jp.pac台湾:https://pac.mcplay.cn/tw.pac如果想上Google可以试试简单的方法,在ie的代理自动配置脚本设置这个p ...

  4. iOS 开启data protection 的方法

    我这里说的data protection,指的是设备设置密码后,如果设备锁屏,并且当前解锁需要密码(有时可能因为自己的设定,导致会再几小时后才需要密码),这时应用程序处于加密状态,无法从外部读取.如果 ...

  5. eclipse中手动导入DTD文件的方式

    DTD一般应用在应用程序中定义数据交换类型的文档,一般用在xml配置文件中,有些时候在eclipse中并不能加载一些提示,这个时候需要手动导入,导入方法如下: 1.首先根据声明的网址下载.dtd的文件 ...

  6. perl的一些函数（二）

    1. tr 转换 转换不是替换(tr///==y///) tr/searchlist/replacementlist/用于查找某个一个字符串,并用replacementlist替换,可以使用正则表达式 ...

  7. MongoDB 3.0 用户创建

    摘要: MongoDB 3.0 安全权限访问控制,在添加用户上面3.0版本和之前的版本有很大的区别,这里就说明下3.0的添加用户的方法. 环境.测试: 在安装MongoDB之后,先关闭auth认证,进 ...

  8. MPlayer-2016 最新版本

    MPlayer 和 FFmpeg 最新版本 运行 Install.cmd 添加右键播放功能 mplayer\outformat.conf 配置视频分割命令参数 ; 往前0.05秒 大概10多个帧 ' ...

  9. linq lanbda表达式的用法

    1. 查询Student表中的所有记录的Sname.Ssex和Class列.select sname,ssex,class from studentLinq:    from s in Student ...

  10. Jquery如何判断Radiobutton是否选中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...