AngularJS学习笔记——阿里懒懒

AngularJS

一、 表单验证

1. 验证指令

1. required： 必填项
2. ng-minlength\ng-maxlength： 最小\最大长度
3. ng-pattern： 模式匹配
4. type="email"： 验证电子邮件
5. type="number"： 验证数字
6. type="url"： 验证Url

2. 验证属性

在表单元素上添加novalidate标记即可，问题是我们怎么知道我们的表单有哪些字段是有效的，那些事非法或者无效的？ng对此也提供了非常棒的解决方案，表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性，我们可以对表单做出实时响应。

可以使用formName.inputFieldName.property的格式访问这些属性。

使用示例：

 <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate>
    <div >
        <div class="col-md-4">
            <label for="name">1.必填项</label>
        </div>
        <div class="col-md-8">
            <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />
            <span ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
        </div>
    </div>
</form>       

3. 自定义指令

自定义对个email验证的指令：

angular.module("myTest", [])
  .directive('multipleEmail', [function () {
      return {
          require: "ngModel",
          link: function (scope, element, attr, ngModel) {
              if (ngModel) {
                  var emailsRegexp = /^([a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;；]?)+$/i;
              }
              var customValidator = function (value) {
                  var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
                  ngModel.$setValidity("multipleEmail", validity);
                  return validity ? value : undefined;
              };
              ngModel.$formatters.push(customValidator);
              ngModel.$parsers.push(customValidator);
          }
      };
  }])

 <form class="form-horizontal" role="form" id="custom_form" name="custom_form" novalidate>
            <div class="form-group">
                <label class="col-sm-2 control-label">多个email</label>
                <div class="col-sm-10">
                    <input multiple-email name="user_email" ng-model="user.email" required class="form-control" placeholder="自定义验证，多个邮箱地址，以“；”或者“;”分割" />
                    验证通过：{{custom_form.user_email.$valid}}
                </div>
            </div>
            <div class="form-group  text-center">
                <input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="提交" />
            </div>
        </form>

涉及知识点：

1. $viewValue：保存着更新视图所需的实际字符串；
2. $modelValue：
3. $parsers：是一个由函数组成的数组，当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调用时，其中的函数在当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调会以流水线的形式被逐一调用。ngModel从DOM中读取的值会被传入$parsers中的函数，并依次被其中的解析器处理。这是为了对值进行处理和修饰。
4. $formatters： 是一个由函数组成的数组，其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。它和$parser流水线互不影响，用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。
5. $viewChangeListeners：是一个由函数组成的数组，其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。通过$viewChangeListeners，可以在无需使用$watch的情况下实现类似的行为。由于返回值会被忽略，因此这些函数不需要返回值。

二、AngularJS动画

三、AngularJS执行流程

四、AngularJS业务架构