AngularJS 学习笔记（四）--- 表单验证和常用API

一、表单验证

1、概念

​ AngularJS 表单和控件可以对输入的数据进行验证，并对用户输入的非法数据进行警告。一般来说就算前端进行了验证，后端为了安全还是要再次进行验证。

​ HTML5的表单本身带有一定的验证能力，可以与 AngularJS 的验证同时存在，也可以通过在 form 标签上添加 novalidate 属性来禁用表单自带的验证功能。在使用AngularJS 的验证时，必须保证 form标签有name属性，而且其验证由表单的 type 属性决定规则。

2、验证属性

属性	功能
$dirty	检测表单有填写记录
$pristine	检测表单没有填写记录
$valid	检测字段内容是合法
$invalid	检测字段内容是非法的

​ 除了这些验证属性之外，我们还可以通过 ng-minlength 和 ng-maxlength 来决定表单内容的最小最大长度，以及 ng-pattern=“正则表达式” 的醒来来验证输入数据的合理性。

3、案例

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

二、API

1、概念

​ AngularJS 的 API 一般都是 执行常见任务的函数集合，这些 API 需要通过 angular 对象进行访问。

2、常用的API

API	作用
angular.lowercase (<angular1.7） angular.$$lowercase()（angular1.7+）	将字符串转换为小写
angular.uppercase() (<angular1.7） angular.$$uppercase()（angular1.7+）	将字符串转换为大写
angular.copy()	数组或对象深度拷贝
angular.forEach()	对象或数组的迭代函数
angular.isArray()	如果引用的是数组返回 true
angular.isObject()	如果引用的是对象返回 true
angular.isString()	如果引用的是字符串返回 true
angular.equals()	如果两个对象相等返回 true
angular.toJson()	把一个对象转换成Json字符串
angular.fromJson()	把Json字符串转换成对象

3、案例

// 大小写转换
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "RUNOOB";
    $scope.x2 = angular.$$lowercase($scope.x1); // runoob
    $scope.x3 = angular.$$uppercase($scope.x2); // RUNOOB
});
</script>

// 数据类型判断
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "RUNOOB";
$scope.x2 = angular.isString($scope.x1); // true
});
</script>

// 深拷贝对象  
// 由于 angular 的双向绑定特点，那么如果直接操作 $scope 对象，那么很容易就会改变 ui 的显示，这个时候就需要借助 angular.copy 来创建一个对象副本，并进行操作，最后确定之后再对原 $scope 对象进行修改
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = {
    name: 'tom'
};
// angular.copy(source, [destination]);  source 代表被复制的对象 destination 代表复制的那个对象存放的地方  还有返回值是复制的对象  与destination的值相等。
$scope.x2 = angular.copy($scope.x1); 
});
</script>

// 必将两个对象是否相等
<script>
var obj1 = {a: 1};
var obj2 = obj1;
//引用一致，则相等
console.log(angular.equals(obj1, obj2)); // true
    
obj2 = {a: 1};
//引用不一致，对象内容一致，则相等
console.log(angular.equals(obj1, obj2)); // true
   
obj2 = {a: 1,$a: 2};
//对象比较是否相等时，忽略以$开头的属性
console.log(angular.equals(obj1, obj2)); // true
</script>

// 遍历对象和数组
<script>
var obj = {name: 'misko', gender: 'male'};
var arr = ['misko', 'male'];
angular.forEach(obj, function (value, key) {
  console.log(key + ' = ' + value);
});
angular.forEach(arr, function (value, i) {
  console.log(i + ' = ' + value);
});
</script>