您的位置：首页 > Web前端 > AngularJS

AngularJS学习记录-表单验证

2016-05-02 21:19 585 查看

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-
4000
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs 表单

相关文章推荐

新的分享

章节导航