Angular 输入框实现自定义验证功能

此插件使用angular.js、JQuery实现。（jQuery的引入需在angular 之前） 　　用户可以 在输入框输入数据后验证 必填项、整数型、浮点型验证。 　　如果在form 里面的输入框验证，可以点击 提交按钮后，实现 必填项验证。 效果图如下： (1)验证未通过时，背景标红等样式为　　 input.ng-invalid, select.ng-invalid { background-color: #ee82ee !important; border: 1px solid #CCC; } .qtip { position: absolute; m 在AngularJS中，自定义验证功能是通过使用指令（Directives）来实现的，这使得我们可以根据业务需求创建复杂的验证规则。在这个特定的例子中，我们看到一个名为`myValid`的自定义指令被用来实现必填项、整数型和浮点型验证。 1. **自定义验证指令**： `myValid`指令是这个插件的核心部分，它负责处理输入框的验证逻辑。通过`require: 'ngModel'`，这个指令与输入框的`ngModelController`关联，这样就可以访问和操作模型值。`link`函数则用于定义指令的行为，包括如何响应用户的输入并进行验证。 2. **$parse服务**： 指令中注入了`$parse`服务，用于解析`myValid`属性中的表达式，这些表达式可能包含对模型值的引用以及自定义验证函数的调用。 3. **uiTipsFactory和uiValidFactory**： 这两个服务可能包含了提示信息的处理和验证逻辑。`uiValidFactory`可能提供了一组预定义的验证方法，如检查是否为整数或浮点数。而`tips`服务可能负责显示错误提示，如使用QTip库创建的弹出提示。 4. **HTML模板**： HTML代码中，每个输入框都有`ng-model`指定要绑定的模型，并使用`myValid`指令定义验证规则。例如，`my-valid="r"`可能是要求必填，`my-valid="int fn:certCheck"`则可能表示需要输入整数并调用`certCheck`函数进行额外验证。 5. **样式处理**： 当AngularJS内置的验证机制发现输入无效时，会给元素添加`.ng-invalid`类。插件重写了这个类的样式，将背景色设为紫色并调整边框，以便更明显地显示验证失败。 6. **表单提交**： 通过`ng-click`事件，`submit()`函数在用户点击“提交”按钮时被调用，此时会触发所有关联的验证。如果任何输入字段验证失败，表单将不会被提交。 7. **动态验证规则**： 通过`getRules`函数，可以获取到输入框当前的验证规则。这允许规则随时间动态变化，比如当用户交互时更新验证条件。 8. **状态管理**： `validFn`函数处理验证过程，记录上一次的规则(`lastOldRules`)，并在需要时合并新的规则。这确保了验证逻辑的正确性和灵活性。 9. **错误提示**： 当验证失败时，QTip库可能会被用来显示带有详细错误信息的提示。`uiValidFactory`和`uiTipsFactory`在这里起着关键作用，它们负责创建和显示这些提示。 这个插件利用AngularJS的指令系统和内置的表单验证机制，结合自定义的服务和样式，提供了丰富的自定义验证功能。开发者可以根据自己的需求轻松地扩展和修改这些验证规则，以适应各种各样的输入验证场景。