• bootstrap表单验证插件-bootstrapvalidator的初级用法
  • 张健文 发表于 2016/2/24 13:16:00 | 分类标签: 表单验证 验证插件 bootstrap
  • 前言:做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。

    一、源码及API地址

    介绍它之前,还是给出它的源码以及API的地址吧。
    boostrapvalidator api:http://bv.doc.javake.cn/api/

    二、代码以及效果展示

    初级用法
    来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件
    <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" />
    我们知道,既然是表单验证,那么我们在cshtml页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。
         <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>
    有了表单元素之后,就是我们的js初始化了。
        $(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: '邮箱地址不能为空'
    }
    }
    }
    }
    });
    });
    内容应该很容易看懂。来看效果:

    验证通不过,提交按钮灰掉不能点击
    验证通过,提交按钮恢复
    看看效果先感受下,最大优点:使用简单,界面友好。

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:张健文
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮