AngularJS表单验证中级篇（3）

目录

基本验证
验证插件messages
自定义验证 

基本验证

以上展示了基本的ng验证.

这里重点介绍一下上面的特例:

novalidate:禁用H5自带的验证

ng-maxlength: 如果不写ng,maxlength则直接限制最多输入字符,稍微有点区别(IE9 + Chrome 测试)

ng-pattern:通过正则验证,如果不写ng开头,无验证效果.

注:要启用验证 同时需要绑定一个ng-model 

访问表单属性

---方位表单:

这里只是判断了require 当我们的代码 我们重复写了很多3元表达式 

messages插件就是更友好的解决重复的问题

Nuget:Install-Package AngularJS.Messages

自定义验证

通过基本的验证方式,我们已经能够解决大部分的验证问题.但项目中永远充满着各种各样的需求.

在ng中的自定义验证,一般通过指令的形式创建.

在上面的messages插件Demo中,新建一行验证用户名已存在 以及 在input上添加了ensure-unique指令

同时,我们需要在js中定义ensure-unique指令:

angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) {
      return {
 restrict: "A",
 require: 'ngModel',
 link: function (scope, ele, attrs, ngModelController) {
   scope.$watch(attrs.ngModel, function (n) {
     if (!n) return;
     $timeout.cancel($window.timer);
     $window.timer = $timeout(function () {
$http({
  method: 'get',
  url: '/api/checkusername/', //根据换成自己的url
  params: {
    "username": n
  }
}).success(function (data) {
  ngModelController.$setValidity('unique', data.isUnique); //这个取决于你返回的，其实就是返回一个是否正确的字段，具体的这块可以自己修改根据自己的项目
}).error(function (data) {
  ngModelController.$setValidity('unique', false);
});
     }, 500);
   });
 }
      };
    }]);

指令不是本节重点内容,这里简单说下

ngModelController.$setValidity('unique', bool);

通过该API可以设置$error.unique.

setValidity为true,则$error.unique为false

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。