jquery开源组件bootstrapvalidator怎么用

科技资讯 投稿 7900 0 评论

jquery开源组件bootstrapvalidator怎么用

本章内容给大家谈谈关于遇上jquery开源组件bootstrapvalidator怎么用等问题,我们该怎么处理呢。下面这篇文章将为你提供一个解决思路,希望能帮你解决到相关问题。

使用BootstrapValidator实现表单验证 BootstrapValidator是一款基于jQuery的表单验证工具,它使用Bootstrap3做样式支持,十分方便易用。使用BootstrapValidator,你只需简单几行代码就可以实现表单验证功能,这篇文章将为你详细讲解如何使用BootstrapValidator实现表单验证。 一、准备工作 在使用BootstrapValidator之前,需要做的准备如下: 1. 引入jQuery和Bootstrap3的css和js文件。 2. 引入BootstrapValidator的css和js文件。 在引入文件的时候,应该将BootstrapValidator.js文件放在jQuery.js文件和Bootstrap3的js文件之后,如下所示:

1. 引入文件


  
    <!-- 引入jQuery和Bootstrap3的css和js文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 引入BootstrapValidator的css和js文件 -->
    <link rel="stylesheet" href="/path/to/bootstrapValidator.min.css">
    <script src="/path/to/bootstrapValidator.min.js"></script>
  
二、最简单的表单验证 在HTML代码中定义一个form表单,然后添加需要验证的input元素,最后通过JavaScript代码启动表单验证即可。如下所示:

2. 简单的表单验证


  
    <form id="defaultForm">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="username">
        </div>

        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" name="password">
        </div>
    </form>

    <script>
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator();
        });
    </script>
  
注意:这段JavaScript代码要等到DOM加载完成后再运行。 三、更多实例 除了简单的表单验证,BootstrapValidator还支持其他验证方式。下面我们将举例四种验证方式来说明:

3. 更多实例

1. 非空判断 下面代码中的非空判断验证规则只需要添加非空规则required就可以了。

  
    <form id="defaultForm">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="username" required>
        </div>

        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" name="password" required>
        </div>
    </form>

    <script>
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator();
        });
    </script>
  
2. 验证长度 如果要验证输入内容长度,需要使用stringLength验证规则,如maxLength最多输入10个字符,minLength最少输入6个字符。

  
    <form id="defaultForm">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="username" required
                   data-bv-stringlength="true"
                   data-bv-stringlength-min="6"
                   data-bv-stringlength-max="10"
                   data-bv-stringlength-message="长度必须为6到10个字符">
        </div>

        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" name="password" required
                   data-bv-stringlength="true"
                   data-bv-stringlength-min="6"
                   data-bv-stringlength-max="20"
                   data-bv-stringlength-message="长度必须为6到20个字符">
        </div>
    </form>

    <script>
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator();
        });
    </script>
  
3. 验证邮箱

  
    <form id="defaultForm">
        <div class="form-group">
            <label>邮箱</label>
            <input type="text" class="form-control" name="email" required
                   data-bv-emailaddress="true"
                   data-bv-emailaddress-message="请输入正确的电子邮件地址">
        </div>
    </form>

    <script>
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator();
        });
    </script>
  
4. 验证手机号码

  
    <form id="defaultForm">
        <div class="form-group">
            <label>手机号码</label>
            <input type="text" class="form-control" name="phone" required
                   data-bv-phone="true"
                   data-bv-phone-message="请输入正确的手机号码格式">
        </div>
    </form>

    <script>
        $(document).ready(function() {
            $('#defaultForm').bootstrapValidator();
        });
    </script>
  
以上代码演示了最常见的四种验证方式,除了这些,BootstrapValidator支持很多其他的验证方式,需要根据实际需求选择使用。 至此,本文介绍了如何使用BootstrapValidator实现表单验证功能,包括引入文件、最简单的表单验证、更多实例等内容。此外,BootstrapValidator还支持很多其他的验证方式,可根据实际需求进行使用。如果您有兴趣,可以继续深入了解该插件的使用。

总结

以上就是为你整理的jquery开源组件bootstrapvalidator怎么用全部内容,希望文章能够帮你解决相关问题,更多请关注本站相关栏目的其它相关文章!

编程笔记 » jquery开源组件bootstrapvalidator怎么用

赞同 (40) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽