zoukankan      html  css  js  c++  java
  • BootStrap Validator

    表单验证,必须有Form表单,需要用到form-group 

    如果使用了 input-group 无法显示出 校验提示

    <div class="input-group">
      <span class="input-group-addon">姓名</span>
      <input type="text" id="username" class="form-control" value="${username}" placeholder="姓名">
    </div>

    引入:

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
    <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

    <form>
    <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control" name="username" />
    </div>
    <div class="form-group">
    <label>Email address</label>
    <input type="text" class="form-control" name="email" />
    </div>
    <div class="form-group">
    <button type="submit" name="submit" class="btn btn-primary">Submit</button>
    </div>
    </form>

    $(function () {
    $('form').bootstrapValidator({

            message: 'This value is not valid',
     feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
             },
    fields: {
    username: {
    message: '用户名验证失败',
    validators: {
    notEmpty: {
    message: '用户名不能为空'
    }
    }
    },
    email: {
    validators: {
    notEmpty: {
    message: '邮箱地址不能为空'
    }
    }
    }
    }
    });
    });

  • 相关阅读:
    CentOS下安装Git
    MongoDB 从入门到精通专题教程
    mongodb分布式集群架构
    CentOS6.2 下安装中文语言包
    英语流利说 第18天
    英语流利说 第17天
    英语流利说 第16天
    英语流利说 第15天
    英语流利说 第14天
    英语流利说 第13天
  • 原文地址:https://www.cnblogs.com/taiguyiba/p/11993127.html
Copyright © 2011-2022 走看看