ASP.NET中JS邮箱校验正则@被识别为C#代码报错如何解决

• 待实现功能：给文本框绑定onchange事件，文本内容变更时自动校验输入是否为合法邮箱，校验通过则自动提交表单；同时需要优化邮箱校验正则，仅允许特定域名的邮箱通过。
• 开发环境问题：在ASP.NET Razor视图中编写JS代码时，正则里的@符号会被框架识别为C# Razor语法标识导致报错，先后尝试加:、加;、反斜杠转义@的方案均无效。
• 现有实现代码：

document.getElementById("txtCallerID").onchange = function () {
        var temp = document.getElementById("txtCallerID").value

        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(temp))
          {
            this.document.submit();
          }
    }

• 报错截图：
  • 原始代码报错：
  • 反斜杠转义@后报错：

1. 修复Razor环境下@符号解析报错 #

Razor在服务端渲染视图时，会优先解析所有@开头的内容作为C#服务端代码，JS层面的反斜杠转义、加特殊符号的方案都在客户端执行阶段生效，无法干预服务端的解析逻辑，全部无效。
两种可用修复方案：

• 方案一：Razor原生转义，把JS代码里所有的@替换为@@，Razor渲染时会自动将@@输出为单个@到前端页面，不会触发语法报错。
• 方案二：JS层绕开，用@的ASCII十六进制转义符\x40代替正则里的@，正则匹配效果完全一致，且代码中不出现@字符，从根源避免Razor误解析。

2. 实现指定域名邮箱校验 #

把正则里匹配通用域名后缀的部分，替换为需要放行的固定域名即可，例如仅允许example.com域名的邮箱通过，两种写法对应如下：

• 双@转义写法：/^\w+([\.-]?\w+)*@@example\.com$/
• \x40绕开写法：/^\w+([\.-]?\w+)*\x40example\.com$/

3. 修复原代码的提交bug #

原代码中this.document.submit()写法错误，onchange事件回调里的this指向当前触发事件的文本框DOM元素，不存在document属性。可以直接通过表单ID获取表单元素后调用提交方法，也可以直接通过document.forms获取对应表单提交。

修正后完整代码示例 #

<script>
document.getElementById("txtCallerID").onchange = function () {
    // 直接通过this获取当前文本框输入值，无需重复查询DOM
    const inputVal = this.value.trim();
    // 示例：仅允许后缀为@your-domain.com的邮箱通过，按需替换实际域名即可
    const emailReg = /^\w+([\.-]?\w+)*@@your-domain\.com$/;
    if (emailReg.test(inputVal)) {
        // 替换为页面实际的表单ID
        document.getElementById("form1").submit();
    }
}
</script>

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