表单验证：需完成三个电话号码字段中的至少一个

你可以借助formvalidation.io的自定义验证规则实现这个需求，核心是检查三个字段中是否至少有一个不为空且符合号码格式。

步骤1：初始化表单验证并添加自定义规则 #

在页面加载完成后，初始化表单验证，给每个电话字段添加phone格式验证和自定义的callback规则：

document.addEventListener('DOMContentLoaded', function() {
    FormValidation.formValidation(
        document.getElementById('你的表单ID'), // 替换为实际表单ID
        {
            fields: {
                telephone_fixe: {
                    validators: {
                        phone: {
                            country: 'FR', // 根据需求设置国家代码，示例为法国
                            message: '请输入有效的固定电话号码'
                        },
                        callback: {
                            message: '至少需要填写一个电话号码',
                            callback: function() {
                                // 获取三个字段的去空格后的值
                                const fixeVal = document.getElementById('telephone_fixe').value.trim();
                                const mobileVal = document.getElementById('telephone_mobile').value.trim();
                                const mobile2Val = document.getElementById('telephone_mobile2').value.trim();
                                
                                // 只要有一个字段不为空就返回true
                                return fixeVal !== '' || mobileVal !== '' || mobile2Val !== '';
                            }
                        }
                    }
                },
                telephone_mobile: {
                    validators: {
                        phone: {
                            country: 'FR',
                            message: '请输入有效的移动电话号码'
                        },
                        callback: {
                            message: '至少需要填写一个电话号码',
                            callback: function() {
                                const fixeVal = document.getElementById('telephone_fixe').value.trim();
                                const mobileVal = document.getElementById('telephone_mobile').value.trim();
                                const mobile2Val = document.getElementById('telephone_mobile2').value.trim();
                                return fixeVal !== '' || mobileVal !== '' || mobile2Val !== '';
                            }
                        }
                    }
                },
                telephone_mobile2: {
                    validators: {
                        phone: {
                            country: 'FR',
                            message: '请输入有效的移动电话号码'
                        },
                        callback: {
                            message: '至少需要填写一个电话号码',
                            callback: function() {
                                const fixeVal = document.getElementById('telephone_fixe').value.trim();
                                const mobileVal = document.getElementById('telephone_mobile').value.trim();
                                const mobile2Val = document.getElementById('telephone_mobile2').value.trim();
                                return fixeVal !== '' || mobileVal !== '' || mobile2Val !== '';
                            }
                        }
                    }
                }
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap5: new FormValidation.plugins.Bootstrap5({
                    eleValidClass: '',
                    rowSelector: '.col-md-4'
                }),
                submitButton: new FormValidation.plugins.SubmitButton(),
                icon: new FormValidation.plugins.Icon({
                    valid: 'bi bi-check',
                    invalid: 'bi bi-x',
                    validating: 'bi bi-hourglass-split'
                })
            }
        }
    );
});

步骤2：优化代码（可选） #

为了避免重复代码，可以把检查逻辑抽成独立函数：

function checkAtLeastOnePhone() {
    const fixeVal = document.getElementById('telephone_fixe').value.trim();
    const mobileVal = document.getElementById('telephone_mobile').value.trim();
    const mobile2Val = document.getElementById('telephone_mobile2').value.trim();
    return fixeVal !== '' || mobileVal !== '' || mobile2Val !== '';
}

然后在每个字段的callback中调用这个函数：

callback: {
    message: '至少需要填写一个电话号码',
    callback: function() {
        return checkAtLeastOnePhone();
    }
}

关键说明 #

• phone规则确保填写的号码格式符合对应国家的规范；
• callback规则负责校验三个字段的整体状态，只要有一个字段填写了内容，就通过验证；
• 记得替换代码中的表单ID和国家代码，匹配你的实际业务场景。

内容的提问来源于stack exchange，提问作者Akaseb