如何解决 Angular 应用程序中“消失”的 jQuery 验证问题？

Posted 2023-05-09

【中文标题】如何解决 Angular 应用程序中“消失”的 jQuery 验证问题？

【英文标题】：How to troubleshoot "disappearing" jQuery validation in Angular appliacation?

【发布时间】：2016-03-20 01:49:12

【问题描述】：

我们有这个 Angular (1.2.19) 页面，它利用 jQuery 验证库进行表单验证。有时所有的验证功能都消失了：人们可以提交他们想要的任何东西，而没有任何东西得到验证。这种行为可能有 50% 的时间发生，否则可以正常工作。控制台中没有错误。

我们目前的理论是，这可能与加载 javascript 文件的顺序有关，并且有时加载的顺序会产生冲突，但由于没有出现错误，因此不确定如何验证这一点？

这是我们的索引文件脚本

<!-- JQUERY -->
<script type="text/javascript" src="libs/userjs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="libs/userjs/jquery-validation/dist/jquery.validate.js"></script>
<script type="text/javascript" src="js/extra-validator-methods.js"></script>

<!-- ANGULAR CORE JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-animate/angular-animate.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="libs/angular-qr/lib/qrcode.js"></script>
<script type="text/javascript" src="libs/angular-qr/angular-qr.min.js"></script>
<script type="text/javascript" src="libs/angular-validate/angular-validate.js"></script>

【问题讨论】：

你能用打开的浏览器调试器重现它吗？在console 中查看在没有验证的情况下会出现什么错误？

【参考方案1】：

脚本的顺序不是问题；它们每次都以相同的顺序加载（它们阻止包含）。

更有可能的是，Angular 正在从 DOM 中删除 <form> 并在 $digest 将更改传播到表单的父节点之一之后注入一个新的。当 jQuery 插件第一次运行时，它会将处理程序附加到 <input> 节点；但是这些输入已被删除并替换为新输入，因此按键/更改/提交事件不会触发 jQuery 处理程序。

最好使用 Angular 事件处理程序（如 ng-change、ng-submit 等）来验证来自 Angular 控制器的输入。尝试同时使用 Angular 和 jQuery 来管理表单的状态会很麻烦。

使用ng-model 跟踪控制器中的每个字段，并在ng-change 上检查它们的值并提供反馈。