一、表单验证
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>