如何使 jQuery 输入验证功能与 Angular 模板一起使用？答案

【问题标题】：How to make a jQuery input validation function work with Angular templates?如何使 jQuery 输入验证功能与 Angular 模板一起使用？
【发布时间】：2017-01-02 08:14:04
【问题描述】：

我正在使用一个 jQuery 函数来自动处理表单，并在使用 jQuery 时显示错误。我也在使用 Bootstrap 3。

(function() {
    // Form Processing
    $('input').each(function() {
        var $this = $(this);
        $this.on('input', function() {
            if ($this.val().length === 0) {
                if ($this.attr('required')) {
                    $this
                        .parent('div.control-group')
                        .addClass('has-error')
                        .end()
                        .siblings('p.text-danger')
                        .empty()
                        .text('This field is required');
                } else {}
            } else {}
        });
    });
})();

基本上，这会检查是否需要某个字段。如果该字段无效，则会显示一条简单的错误消息。它也非常好用。

这里有一个基本的模板，使这个工作：

<div class="control-group>
    <input type="email" required>
    <p class="text-danger"></p>
</div>

但是，当我使用 Angular 模板时，代码不会出现，因为事先没有加载 DOM。我认为正确的做法是为此代码创建一个 Angular 指令。我对此有几个问题：

我应该把导数放在哪里？应该是myapp.run 之类的吗？
我创建衍生产品的假设有误吗？有没有更好的方法来做到这一点，以便它与 Angular 一起使用？

谢谢。

【问题讨论】：

向所有此类输入添加一个公共类（required），然后使用委托。 $(document).on('.required', 'input', function(){...})。尽管如果您使用的是框架，您应该坚持使用它的方法。你越是走出框架的环境去实现东西，你的代码就越脆弱
当 Angular 已经内置表单验证时，这是完全错误的方法
从你的项目中取出 jQuery 和 bootstrap.js 并阅读 Thinking in angular when I have a jQuery background
@charlietfl - 我知道，我正在使用ng-disabled="form$invalid"，但是，没有显示错误消息，所以这就是它的用途。
为什么不使用ng-messages api？它建立在角度验证之上。即使你不使用，也有ng-if，或ng-show

标签： jquery angularjs twitter-bootstrap angularjs-ng-model

【解决方案1】：

您可以使用 form 或 ng-form 指令与 ng-messages 指令结合使用，以避免将 jquery 与 angular 混合使用

例子

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

来源https://docs.angularjs.org/api/ngMessages/directive/ngMessages

【讨论】：

我的荣幸 :) 玩得开心！