<!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. Google java style

    这里主要是记录关于java style的笔记. 1,Google的. 博客链接(中文):http://www.cnblogs.com/lanxuezaipiao/p/3534447.html. 官方链 ...

  2. js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  3. SQL 执行计划(二)

    最近总想整理下对MSSQL的一些理解与感悟,却一直没有心思和时间写,晚上无事便写了一篇探索MSSQL执行计划,本文讲执行计划但不仅限于讲执行计划. 网上的SQL优化的文章实在是很多,说实在的,我也曾经 ...

  4. 【leetcode】Multiply Strings

    Multiply Strings Given two numbers represented as strings, return multiplication of the numbers as a ...

  5. 【leetcode】Wildcard Matching

    Wildcard Matching Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any ...

  6. VIM基础

    http://www.cnblogs.com/wawlian/archive/2012/05/22/2512801.html http://www.cnblogs.com/wawlian/archiv ...

  7. redis与memcache区别总结

    2015年9月2日 14:04:19 总会被问到两者的区别, 在这里总结下: redis 有内置的多种数据结构, list(可用于实现小型队列), hash, set, zset...; memcac ...

  8. Python~第三方模块

    第三方库还有MySQL的驱动:MySQL-python,用于科学计算的NumPy库:numpy,用于生成文本的模板工具Jinja2 模块搜索路径 Windows下: 双\\   sys.path.ap ...

  9. [第三方]SCNetworkReachability 获取网络状态控件使用方法

    用Cocoa Pods导入控件以后 直接导头文件 复制以下代码 [SCNetworkReachability host:@"github.com" reachabilityStat ...

  10. CCF I'm Stuck!

    问题描述 试题编号: 201312-5 试题名称: I'm stuck! 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一个R行C列的地图,地图的每一个方格可能是'#', ...