<!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. SQL Server 2008 R2 Developer (x86, x64, ia64) – DVD (Chinese-Simplified)

    http://blog.sina.com.cn/s/blog_4aedf6370101j9tz.html 1. SQL Server 2008 R2 Developer (x86, x64, ia64 ...

  2. 【Network】高性能 UDP 服务应该怎么搞？

    参考资料: Netty系列之Netty高性能之道 C++高性能服务框架revover:rudp总体介绍(可靠UDP传输) - zerok的专栏 - 博客频道 - CSDN.NET 高性能异步Socke ...

  3. AngularJS概述&指令

    AngularJS 指令 AngularJS 应用组成如下: View(视图), 即 HTML. Model(模型), 当前视图中可用的数据. Controller(控制器), 即 JavaScrip ...

  4. jQuery数组($.each,$.grep,$.map,$.merge,$.inArray,$.unique,$.makeArray)处理函数详解

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象.回调函数拥有两个参数:第一个为对象的成员 ...

  5. 《Head First Servlet JSP》容器工作原理(如tomcat)

  6. 【leetcode】Word Ladder

    Word Ladder Total Accepted: 24823 Total Submissions: 135014My Submissions Given two words (start and ...

  7. http apr 8080 exec 3解决

    IDEA运行tomcat,总是出现这个错误. 解决: 在tomcat的配置里,加上下面这句话: -Xms256m -Xmx512m -XX:MaxNewSize=64m -XX:MaxPermSize ...

  8. mount --bind 重启后失效的解决办法

    vsftp不支持软链接,可以用mount来支持不同的目录结构 mount --bind /home/www/web/ROOT/img/upload /ftp/private/upload 重启后失效. ...

  9. response content-type json

    2015年11月3日 15:47:43 百度知道:ajax开发中在请求服务器端的响应时, 对于每一种返回类型 规范的做法是要在服务端指定response的contentType 常遇到下面的几种情况: ...

  10. code vs1436 孪生素数 2(数论+素数的判定)

    1436 孪生素数 2  时间限制: 2 s  空间限制: 1000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Description 如m=100,n=6 则 ...