表单验证-bootstrapValidator

本文介绍了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
                    }
               }
            }
          }
    });
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值