ASP.NET Core 6 Identity注册页面Clear按钮功能异常求助

问题现象 #

• 基于ASP.NET Core 6.0 Identity和Razor Pages开发的注册页面，Submit按钮功能正常，但Clear按钮存在异常行为
• 当在邮箱输入框中输入不完整的邮箱地址后点击Clear按钮，首次点击不会直接清空输入内容，而是先触发邮箱格式验证，显示“这不是有效的邮箱”提示；第二次点击才能成功清空所有输入框

问题原因 #

页面引入了_ValidationScriptsPartial，其中包含的jQuery Validation和jQuery Unobtrusive Validation会在表单元素值变更时自动触发验证规则。点击Clear按钮清空输入框的动作，会触发邮箱字段的格式验证逻辑，导致错误提示先于清空操作显示，用户误以为首次点击未生效。

解决方案 #

1. 修改Clear按钮的点击事件脚本 #

替换原有脚本，先重置表单验证状态，再清空输入框：

$(document).ready(function () {
    $('#clear').click(function () {
        // 重置表单的验证状态，清除所有错误提示
        $('#registerForm').validate().resetForm();
        // 清空表单内所有输入框的值
        $('#registerForm input').val('');
        // 移除输入框的错误样式类
        $('#registerForm input').removeClass('input-validation-error');
    });
});

2. 优化按钮语义（可选） #

将Clear按钮的<a>标签替换为<button>标签，更符合表单交互的语义规范，避免潜在的事件冲突：

<button class="clear-button" id="clear" type="button">Clear</button>

原理说明 #

• resetForm()方法会重置jQuery Validation的内部验证状态，清除页面上所有已显示的验证错误提示
• 先重置验证状态再清空输入框，能避免清空动作触发的即时验证逻辑，确保用户点击Clear按钮时直接完成清空操作

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