<!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. 嵌套div中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...

  2. 使用 MongoDB 的_id 查询

    MongoDB 默认在插入数据时,生成一个主键_id,那么怎么使用_id来查询数据? 查询全部 > db.foo.find(){ "_id" : ObjectId(" ...

  3. php内核和瓦力上线部署

    http://www.php-internals.com/ http://www.walle-web.io/

  4. 用pywinauto进行win32应用程序的测试

    之前做win32应用测试时,用过很多大家耳熟成详的工具,接触pywinauto之前,对它的了解也不多,然而,随着对它了解的增多,发现它借助了python动态对象的能力,使得代码即便于书定,也便于阅读, ...

  5. Spring AOP基于配置文件的面向方法的切面

    Spring AOP基于配置文件的面向方法的切面 Spring AOP根据执行的时间点可以分为around.before和after几种方式. around为方法前后均执行 before为方法前执行 ...

  6. 使用mysqladmin ext了解MySQL运行状态【转】

    摘要: mysqladmin是 MySQL一个重要的客户端,最常见的是使用它来关闭数据库,除此,该命令还可以了解MySQL运行状态.进程信息.进程杀死等.本文介绍一下如何使用 mysqladmin e ...

  7. PUTTY的使用教程

    Putty是一个优秀的,开源的SSH远程登录软件. 它不仅仅可以实现登录,还有很多高级功能. PuTTY is a free SSH, Telnet and Rlogin client for 32- ...

  8. oracle触发器加条件判断

    oracle触发器加条件判断,如果某个字段,isnode=0,那么不执行下面的方法,数据如下: create or replace trigger tr_basestation_insert_emp ...

  9. 监控Tomcat解决方案（监控应用服务器系列文章分享）

    使用JMX接口开发监控程序  ◆ 全部代码需要从零开始,代码量较大  ◆ 支持各不同版本比较麻烦,每个版本可能有差异  ◆ 可支配性强  ◆ 最重要的一个缺点是,配置比较麻烦 Tomcat激活JMX远 ...

  10. bootstrap清除拟态框内添加新HTML再打开时会有缓存现象

    $(function(){ $("#editor").on("hidden.bs.modal",function(){ //清除缓存方法 $(this).fin ...