<!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. 2.2---找链表倒数第K个结点

    答案,注意,一种是递归,另一种是迭代,那么巧妙利用双指针: 迭代: public static LinkedListNode nthToLast(LinkedListNode head, int n) ...

  2. symfony2 环境搭建笔记

    本机环境:windows+xampp symfony下载:官网下载 环境配置: 1.下载后将symfony文件夹解压到xampp/htdocs中(最好改一下文件夹名,尽量小写) 2.Symfony2自 ...

  3. css常用代码

    透明度: filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; 英文大小写: div{text-transform:capitalize|U ...

  4. c#.net循环将DataGridView中的数据赋值到Excel中，并设置样式

    Microsoft.Office.Interop.Excel.Application excel =                new Microsoft.Office.Interop.Excel ...

  5. Linux下cp -rf总是提示覆盖的解决办法

    通常情况下使用cp -rf进行文件或者文件夹的管理时一般就不再提醒是否覆盖.然而在内网的一台机器上使用cp -rf却提示是否覆盖.难道和常用的命令不同? [root@xxxx test]# cp -r ...

  6. linux学习之lvm-逻辑卷管理器

    一.简介 lvm即逻辑卷管理器(logical volume manager),它是linux环境下对磁盘分区进行管理的一种机制.lvm是建立在硬盘和分区之上的一个逻辑层,来提高分区管理的灵活性.它是 ...

  7. DELPHI控件：DBLookupComboBOX组件的使用方法

    在许多数据表中,数据是以代码方式存放的,如在班级编码数据表tB03(表5．5)中,系部字段TB0309采用编码方式存放,系部真实名称则存放在系部编码表TB06.使用代码的好处是,用户可在编码表TB06 ...

  8. 20. javacript高级程序设计-JSON

    1. JSON JSON是一种数据格式,存在以下三种类型的值: l 简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null,不支持 undefined,例如: ...

  9. 【leetcode】 Search a 2D Matrix (easy)

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  10. docker基础命令

    docker version                                                                                       ...