如何为Azure B2C自定义政策的VerificationControl设置默认已验证状态

针对你遇到的自定义DisplayControl验证问题，以下是对应需求的实现方法：

1. 设置默认已验证状态 #

在自定义DisplayControl的初始化逻辑（比如onLoad或组件挂载生命周期）中，直接将控件的验证状态标记为已验证。以Azure AD B2C自定义控件为例，可通过self.validationStatus控制：

self.onLoad = function () {
    // 即使未输入过邮箱，默认标记为已验证状态
    self.validationStatus = true;
    updateUI();
};

如果是React等框架开发的控件，在useEffect或componentDidMount中初始化验证状态为true即可。

2. 替换默认按钮为“更改”按钮 #

修改UI渲染逻辑，默认状态下隐藏输入框与“发送验证码”按钮，展示当前邮箱（或“未设置邮箱”提示）和“更改”按钮；点击“更改”后切换到编辑模式，显示输入框与验证码相关控件：

function updateUI() {
    const emailInput = document.getElementById('email-input');
    const changeBtn = document.getElementById('change-btn');
    const verifyBtn = document.getElementById('verify-btn');

    if (self.isEditing) {
        emailInput.style.display = 'block';
        verifyBtn.style.display = 'block';
        changeBtn.style.display = 'none';
    } else {
        emailInput.style.display = 'none';
        verifyBtn.style.display = 'none';
        changeBtn.style.display = 'block';
    }
}

// 绑定“更改”按钮点击事件
document.getElementById('change-btn').addEventListener('click', function() {
    self.isEditing = true;
    updateUI();
});

3. 未更改邮箱时跳过验证 #

监听邮箱输入框的内容变化，对比当前输入值与原始邮箱值（从用户初始配置中获取）。若两者一致，保持验证通过状态；若不一致，则要求重新验证：

// 存储用户进入页面时的原始邮箱值
const originalEmail = self.inputs.email.value || '';

document.getElementById('email-input').addEventListener('input', function(e) {
    const currentEmail = e.target.value;
    if (currentEmail === originalEmail) {
        // 未修改邮箱，维持验证通过状态
        self.validationStatus = true;
    } else {
        // 修改了邮箱，需重新验证
        self.validationStatus = false;
    }
    // 通知父组件更新按钮状态
    self.notifyValidationStatusChanged();
});

同时在控件的getOutputs方法中，仅当邮箱被修改时返回新值，否则返回原始值，避免触发不必要的验证逻辑。

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