BootstrapValidator 自定义表单校验

最新推荐文章于 2025-06-03 09:19:03 发布

加了白糖的老干妈

最新推荐文章于 2025-06-03 09:19:03 发布

阅读量2.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Bootstrap Validator 文章标签： Bootstrap Validator

本文链接：https://blog.youkuaiyun.com/qq_21358931/article/details/78914960

Bootstrap 同时被 2 个专栏收录

4 篇文章

订阅专栏

Validator

1 篇文章

订阅专栏

本文详细探讨了如何在BootstrapValidator中进行自定义表单校验，包括前台的updateMessage()方法的使用，指出该方法在实际应用中可能遇到的问题。同时介绍了后台服务端校验的实现，并提供了内置验证器列表的链接以及bootstrapValidator的官方API参考链接。

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

BootstrapValidator 自定义表单校验

- BootstrapValidator 自定义表单校验

前台校验

/**
 * callback
 **/
  inadvanceAmount: {
                    validators: {
                        notEmpty: {message: '预约金额不能为空'},
                        numeric: {message: '预约金额只能输入数字'},
                        callback: {
                            message: '',
                            callback: function(value, validator) {
                                if(CommnUtil.expandTenThousandTimes(value) < PemInadvanceSheetPage.productData.buyOrigin){
                                    validator.updateMessage('inadvanceAmount','callback','预约金额小于当前产品起投金额');
                                    return false;
                                }
                                if(CommnUtil.expandTenThousandTimes(value) > PemInadvanceSheetPage.productData.buyRate){
                                    validator.updateMessage('inadvanceAmount','callback','预约金额不可超过可预约的金额');
                                    return false;
                                }
                                return true;
                            }
                        }
                    }
                },

updateMessage()

有时候，可能错误提醒不是固定的，比如上方例子，但callback又只能写一个，所以需要使用updateMessage 方法，官方api在这个方法，只是介绍了一下，没有例子，在实际使用中，发现这个方法是有问题的。具体什么问题，直接上代码

       /**
         * Update the error message
         *
         * @param {String|jQuery} field The field name or field element
         * @param {String} validator The validator name
         * @param {String} message The message
         * @returns {BootstrapValidator}
         */
        updateMessage: function(field, validator, message) {
            var $fields = $([]);
            switch (typeof field) {
                case 'object':
                    $fields = field;
                    field   = field.attr('data-bv-field');
                    break;
                case 'string':
                    $fields = this.getFieldElements(field);
                    break;
                default:
                    break;
            }

            $fields.each(function() {
                /**官方原版**/
                // $(this).data('bv.messages').find('.help-block[data-bv-validator="' + validator + '"][data-bv-for="' + field + '"]').html(message);

                /**
                 * 因为项目里使用的验证提示在 $tips 层还有div样式,不是单纯的message内容,
                 * 所以需要继续向里找到显示message的div,然后再去updateMessage
                 */
                var $tips = $(this).data('bv.messages').find('.help-block[data-bv-validator="' + validator + '"][data-bv-for="' + field + '"]');
                if($tips.find(".tip_message").html() != undefined){
                    $tips.find(".tip_message").html(message);
                }else{
                    $tips.html(message);
                }
            });
        },

后台交互（服务端）校验

orgQualificateCertNum: {
                    validators: {
                        remote: {
                            message: '资质证书编号已存在',
                            delay:2000, //这里特别要说明，必须要加此属性，否则用户输入一个字就会访问后台一次，会消耗大量的系统资源
                            url: DomainUrl("/pemCustomerProduct/checkQualificate"),
                            data: function (validator) {
                                return {
                                    id: validator.getFieldElements('id').val(),
                                };
                            }
                        }
                    }
                }