Azure AD B2C自定义策略注册页必填字段错误消息自定义咨询

方案一：自定义验证规则（推荐） #

通过给每个必填字段添加专属的验证逻辑，直接触发字段特定的错误提示，无需依赖默认通用提示：

1. 在自定义策略的<ClaimsSchema>节点中，为目标字段添加自定义验证关联：

<ClaimType Id="displayName">
  <DisplayName>Name</DisplayName>
  <DataType>string</DataType>
  <UserInputType>TextBox</UserInputType>
  <!-- 关联自定义验证技术配置 -->
  <ValidationClaimsExchange>
    <ValidationClaimsExchangeTechnicalProfile ReferenceId="ValidateDisplayNameRequired" />
  </ValidationClaimsExchange>
</ClaimType>

<ClaimType Id="phoneNumber">
  <DisplayName>Phone number</DisplayName>
  <DataType>string</DataType>
  <UserInputType>TextBox</UserInputType>
  <ValidationClaimsExchange>
    <ValidationClaimsExchangeTechnicalProfile ReferenceId="ValidatePhoneNumberRequired" />
  </ValidationClaimsExchange>
</ClaimType>

2. 定义对应的验证技术配置和断言转换：

<!-- 验证名字必填 -->
<TechnicalProfile Id="ValidateDisplayNameRequired">
  <DisplayName>Validate Name is required</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.ClaimsTransformationProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="displayName" />
  </OutputClaims>
  <OutputClaimsTransformations>
    <OutputClaimsTransformation ReferenceId="AssertDisplayNameNotEmpty" />
  </OutputClaimsTransformations>
</TechnicalProfile>

<!-- 断言名字非空，自定义错误消息 -->
<ClaimsTransformation Id="AssertDisplayNameNotEmpty" TransformationMethod="AssertStringLength">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="displayName" TransformationClaimType="inputClaim" />
  </InputClaims>
  <InputParameters>
    <InputParameter Id="minimumLength" DataType="int" Value="1" />
    <InputParameter Id="message" DataType="string" Value="Name is required" />
  </InputParameters>
</ClaimsTransformation>

<!-- 验证手机号必填 -->
<TechnicalProfile Id="ValidatePhoneNumberRequired">
  <DisplayName>Validate Phone number is required</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.ClaimsTransformationProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="phoneNumber" />
  </OutputClaims>
  <OutputClaimsTransformations>
    <OutputClaimsTransformation ReferenceId="AssertPhoneNumberNotEmpty" />
  </OutputClaimsTransformations>
</TechnicalProfile>

<ClaimsTransformation Id="AssertPhoneNumberNotEmpty" TransformationMethod="AssertStringLength">
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="phoneNumber" TransformationClaimType="inputClaim" />
  </InputClaims>
  <InputParameters>
    <InputParameter Id="minimumLength" DataType="int" Value="1" />
    <InputParameter Id="message" DataType="string" Value="Phone number is required" />
  </InputParameters>
</ClaimsTransformation>

配置完成后，当对应字段为空时，会直接显示你定义的专属错误提示。

方案二：JavaScript动态替换错误文本 #

如果不想修改策略的验证逻辑，可以通过自定义HTML页面的脚本，在前端替换默认的通用错误提示：

1. 先在Azure AD B2C门户启用JavaScript支持，并确保自定义HTML页面托管在允许的CORS域中。

2. 在自定义注册页面的HTML中添加以下脚本：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form');
  if (!form) return;

  form.addEventListener('submit', function(e) {
    // 延迟执行，确保错误提示已生成
    setTimeout(() => {
      const errorElements = document.querySelectorAll('.error.message');
      errorElements.forEach(el => {
        if (el.textContent.trim() === 'This information is required') {
          const fieldInput = el.closest('.field').querySelector('input, select');
          if (!fieldInput) return;

          // 根据字段ID匹配专属提示
          switch(fieldInput.id) {
            case 'displayName':
              el.textContent = 'Name is required';
              break;
            case 'phoneNumber':
              el.textContent = 'Phone number is required';
              break;
            // 可添加更多字段的匹配规则
          }
        }
      });
    }, 100);
  });
});

这种方式通过监听表单提交，找到默认错误提示元素，根据字段ID替换为自定义文本。

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