AngularJS标签中的单引号答案

【问题标题】：Single quotes in AngularJS tagAngularJS标签中的单引号
【发布时间】：2023-03-22 11:01:02
【问题描述】：

我有以下使用 ng-pattern 指令的电子邮件验证代码。我需要在错误验证中包含单引号，例如： asd'f@dfs.com 失败。我不想使用默认的 angular 指令，因为后续的 ..（点）、^、逗号等不适合

<input type="email" name="username" placeholder="jasdf@asdf.com" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern='/^(([^<>()\[\]\\.\,;:\s@"]+(\.[^<>()\[\]\\.,;^:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />
        <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error">
          <small class="error" ng-show="userForm.username.$error.required">
               Your email is required.
        </small>
          <small class="error" ng-show="userForm.username.$error.pattern">
               Please input a valid email.
        </small>
          <small class="error" ng-show="userForm.username.$error.maxlength">
              Your email cannot be longer than 100 characters
        </small>

从上面可以看出我使用的是下面的Regex：ng-pattern='/^(([^<>()\[\]\\.\,;:\s@"]+(\.[^<>()\[\]\\.,;^:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'

我的问题是如何在正则表达式中包含单引号 (') 以便它不会与 ng-pattern 标签引号和 (^) 冲突。我四处搜索，似乎我应该使用 &apos 但不确定如何实现。感谢任何帮助。

【问题讨论】：

使用\x27 代替'，使用\x22 代替"。你真的对^ 也有问题吗？使用\x5E。
为什么不使用内置电子邮件验证？ plnkr.co/edit/ZcQN0WYSoU1gogFo5nic?p=preview
我会说，最好在这里创建您的自定义指令。如果您需要在多个页面上使用电子邮件验证，请不要在您的 html 页面上使用复杂的模式
跟进我的第一条评论：试试ng-pattern="/^(([^<>()\[\]\\.,;:\s@\x22]+(\.[^<>()\[\]\\.,;^:\s@\x22]+)*)|(\x22[^@]+\x22))@((\[[0-9]{1,3}(\.[0-9]{1,3}){3}])|(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}))$/"
我想我现在明白了 :) 试试^(([^<>()\[\]\\.,;:\s@^\x22\x27]+(\.[^<>()\[\]\\.,;^:\s@\x22\x27]+)*)|(\x22[^‌@]+\x22))@((\[[0-9]{1,3}(\.[0-9]{1,3}){3}])|(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}))$ - 我将^ 添加到第一个否定字符类中。

标签： javascript html angularjs regex

【解决方案1】：

你可以使用这个稍微缩短的版本：

ng-pattern="/^(([^<>()\[\]\\.,;:\s@^\x22\x27]+(\.[^<>()\[\]\\.,;^:\s@\x22\x27]+)*)|(\x22[^‌@‌]+\x22))@((\[[0-9]{1,3}(\.[0-9]{1,3}){3}])|(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}))$/"

这里是regex demo

变化是：

三个\.[0-9]{1,3} 被收缩，因为它被重复3 次到(\.[0-9]{1,3}){3}
第一个和第二个否定字符类现在包含 \x27 (') 和 \x22 (") 符号
还在第一个否定字符类中添加了^
\x22.+\x22 变成了\x22[^‌@‌]+\x22，这样我们就不会溢出到域部分并留在用户名部分。

【讨论】：