AngularJS学习记录-表单验证
表单是各类控件(例如input、select、textarea等)的集合体,是DOM中非常重要的数据交互元素,在angularJS中也对基本的验证功能有所封装
angular中,专门对表单的控件提供了以下的属性用于验证控件交互值的状态:
- $pristine 表示表单或控件内容是否未输入过。
- $dirty 表示表单或控件内容是否已输入过。
- $valid 表示表单或控件内容是否已验证通过。
- $invalid 表示表单或控件内容是否未验证通过。
- $error 表示表单或控件内容验证时的错误提示信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-repeat</title>
<script src="../js/angular.min.js"></script>
<style>
body{
font-size:12px;
}
input{
padding:3px;
}
</style>
</head>
<body ng-app="app">
<form name="myForm" ng-submit="save()" ng-controller="myCtr">
<!--姓名-->
<div>
<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$error.required">姓名不能为空</span>
</div>
<!--邮箱-->
<div>
<input type="text" name="email" ng-model="email" required>
<span ng-show="myForm.email.$error.required">邮箱不能未空</span>
</div>
<!--提交-->
<input type="submit" ng-disabled="myForm.$invalid" value="提交">
</form>
<script>
var app = angular.module('app',[]);
app.controller('myCtr',['$scope',function($scope){
$scope.name = "";
$scope.email = "";
$scope.save = function(){
console.log("提交成功!");
};
}])
</script>
</body>
</html>
在代码片段中,如果要使用angular中提供的表单控件的验证方法,必须要绑定model,否则无法使用。
表单中的checkbox和radio控件
在表达控件中,checkbox和radio控件与input元素的其他类型控件不同,这两个控件不具有angular的控件验证功能,而且checkbox有选中和非选中两种状态,而radio只有一种选中状态。checkbox控件和radio控件都可以通过“ng-model“指令绑定控制器的属性,一旦绑定成功,在首次加载时,将以绑定的属性值作为控件初始化的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-repeat</title>
<script src="../js/angular.min.js"></script>
<style>
body{
font-size:12px;
}
div{
margin:8px 0;
}
</style>
</head>
<body ng-app="app">
<form name="myForm" ng-submit="save()" ng-controller="myCtr">
<div>
<input type="checkbox" ng-model="check" ng-true-value="'同意'" ng-false-value="'不同意'"/>{{check}}
</div>
<div>
性别:
<input type="radio" ng-model="six" ng-value="'男'">男
<input type="radio" ng-model="six" ng-value="'女'">女
</div>
<input type="submit" value="提交">
<div>{{c}}</div>
</form>
<script>
var app = angular.module('app',[]);
app.controller('myCtr',['$scope',function($scope){
$scope.check = "同意";
$scope.six = "男";
$scope.save = function(){
$scope.c = "您选中的是" + $scope.check + "+" + $scope.six;
};
}])
</script>
</body>
</html>
通过以上例子发现checkbox有两个属性是非常有用的,一个ng-true-value和ng-false-value,分别代表是选中和未选中是分别的值是什么,然后通过双向数据绑定,实现更改绑定变量的值。另外单选框也有可以用ng-value去绑定对应的值,因为radio没有required属性,没办法做必填校验,所以最好初始化的时候默认选中一个。
更多可参考以下这边文章:
https://segmentfault.com/a/1190000002632671