表单验证-bootstrapValidator

最新推荐文章于 2024-09-27 06:07:39 发布

原创最新推荐文章于 2024-09-27 06:07:39 发布 · 780 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#插件

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了bootstrapValidator，现在更名为FormValidator，这款知名的Bootstrap表单验证插件。由于原插件已停止更新，作者转向使用FormValidator，该插件支持51种内置验证规则，最新版还兼容Bootstrap4，功能更加强大。文章主要分享了验证规则的使用，特别是从官方Demo中挑选出的一些常用规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrapValidator这个插件应该算是很有知名度的一款bootstrap表单验证插件，它的基本用法都可以百度到，事实上它支持验证方法有很多，但是我都没有百度到demo，所以今天上github看了一下，发觉这个插件已经停止更新了，新的版本换了个名字：FormValidator,所以基础用法是一样的。

FormValidator官网：http://formvalidation.io/

FormValidator支持51种内置验证规则
验证规则完整参考网址：http://formvalidation.io/validators/

最新的一版支持bootstrap4，功能更加强大了，今天就着重讲一下验证部分

我整理了官网的demo，选了几种常用的规则（基础用法自行百度）：

$('#latlongForm').formValidation({
        ……
        fields: {
            latitude: {  //要验证的表单元素的name
                validators: { //必须写，否则不验证
                /*
                 * 1、数字范围
                 * 描述：min最小值，max最大值，message提示
                 *   */
                    between: {
                        min: -90,
                        max: 90,
                        message: '必须在 -90.0 ~ 90.0'
                    }，
                /*
                 * 2、最小值
                 * 描述：value最小值，message提示
                 *   */
                     greaterThan: {
                        value: 18,
                        message: '必须大于等于 18'
                    }，
                /*
                 * 3、最大值
                 * 描述：value最大值，message提示
                 *   */
                     greaterThan: {
                        value: 18,
                        message: '必须小于等于 18'
                    }，
                /*
                 * 4、邮箱格式
                 * 描述：message提示
                 *   */
                    emailAddress: {
                        message: '邮箱格式错误'
                    },
                /*
                 * 5、整数
                 * 描述：message提示
                 *   */
                    integer: {
                        message: '不是整数'
                    },
                /*
                 * 6、非空
                 * 描述：message提示
                 *   */
                    notEmpty: {
                        message: '不能为空'
                    },
                /*
                 * 7、验证两个字段是否相同
                 * 描述：field参考的字段，message提示
                 *   */
                    identical: {
                        field: 'confirmPassword',
                        message: '两次输入密码不同'
                    },
                /*
                 * 8、验证两个字段是否不同
                 * 描述：field参考的字段，message提示
                 *   */
                    different: {
                        field: 'username',
                        message: '不能与username相同'
                    },
                /*
                 * 9、字符串长度
                 * 描述：field参考的字段，message提示
                 *   */
                    stringLength: {
                        message: '必须小于120个字符',
                        max: 120
                    }
               }
            }
          }
    });