仅当国家/地区是美国或加拿大时使用 bootstrapValidator 进行条件验证

Question

我正在使用 bootstrapValidator，我正在尝试找出一种方法，仅在所选国家/地区是美国、加拿大或其他 NANP 国家/地区时验证电话格式，因为它只能检查这些国家/地区的格式。

在我的 java 脚本的“onReady”部分中，我有：

billingPhone: {
        validators: {
                notEmpty: {
              message: 'Phone is required and can\'t be empty'
            },
            phone: {
              message: 'Format is invalid'
            }
        }
},

我有一个带有国家/地区的选择和一个带有电话的输入（以及其他字段）我有一个脚本，它还根据国家/地区选择的值将值 isNANP 更改为 true 或 false。但我不知道如何将if(isNANP) 包裹在电话验证器周围。

我尝试将启用值（见下文）设置为 false 或 true，但它似乎没有任何效果。

billingPhone: {
        validators: {
                notEmpty: {
              message: 'Phone is required and can\'t be empty'
            },
            phone: {
              message: 'Format is invalid',
              enabled: isNNAP ? true : false
            }
        }
},

Answer 1

您可以根据需要创建验证规则。这是一个示例实现：

(function($) {
    $.fn.bootstrapValidator.validators.customPhone = {
        html5Attributes: {
            message: 'message',
            field: 'field',
            check_only_for: 'check_only_for'
        },

        /**
         * Return true if the input value contains a valid US phone number only
         *
         * @param {BootstrapValidator} validator Validate plugin instance
         * @param {jQuery} $field Field element
         * @param {Object} options Consist of key:
         * - message: The invalid message
         * - field: The name of field that will be used to get selected country
         * - check_only_for : Coma separated ISO 3166 country codes // i.e. 'us,ca'
         * @returns {Boolean}
         */
        validate: function(validator, $field, options) {
            var value = $field.val();
            if (value == '') {
                return true;
            }

            var countryField = validator.getFieldElements(options.field);

            if (countryField == null) {
                return true;
            }

            var countryCode = countryField.val().trim();

            if(countryCode == ''){
                return true;
            }

            var check_list = options.check_only_for.toUpperCase().split(',')

            if(check_list.indexOf(countryCode.toUpperCase()) == -1) {
                return true;
            }

            value = value.replace(/\(|\)|\s+/g, '');
            return (/^(?:1\-?)?(\d{3})[\-\.]?(\d{3})[\-\.]?(\d{4})$/).test(value);
        }
    }
}(window.jQuery));

在加载引导验证器后使用它。然后你可以像这样分配验证规则：

billingPhone: {
    validators: {
        notEmpty: {
            message: 'Phone is required and can\'t be empty'
        },
        customPhone: {
            message: 'Format is invalid',
                check_only_for: 'us,ca',
                field: 'country'
        }
    }
},

field 是用于获取所选国家/地区的字段名称。 check_only_for 应列出您要检查验证角色的所有国家/地区代码。

享受吧！