频道导航

AngularJS手动表单验证

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS手动表单验证，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件：

1、给form元素加上novalidate="novalidate"；

2、给form元素加上name="theForm"，

如下：

<div class="form-group" ng-class="{
'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
}">
<label for="email">Email
<input type="email" class="form-control" id="email" ng-model="formModel.email" required="required" name="email"/>
<p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)">必填

<p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确

<div class="form-group">
<label for="username">Username
<input type="text" class="form-control" id="username" ng-model="formModel.username"/>

<div class="form-group">
<label for="sex">Sex
<select name="sex" id="sex" class="form-control" ng-model="formModel.sex">
<option value="">Please choose
<option value="male">Mail
<option value="femail">Femail

<div class="form-group">
<label for="password">Password
<input type="text" class="form-control" id="password" ng-model="formModel.password"/>

<div class="form-group">
<button class="btn btn-primary" type="submit">Register

  {{theForm | json}}

● 给form加上novalidate="novalidate"意味着表单将不再使用HTML5验证特性
● 给form加上name="theForm"意味着表单的名称是theForm。如何使用theForm,比如我们验证表单是否被修改过theForm.$submitted
● 通过ng-submit提交表单
● formModel是$scope中的一个属性
● 对表单的Email进行了手动验证，使用了AngularJS表单的众多属性，比如theForm.email.$valid，theForm.$pristine，theForm.$submitted， theForm.email.$error.required，theForm.email.$error.email
● 通过
```
{{theForm | json}}
```
把AngularJS表单的所有属性都打印出来

required": [ { "$validators": {},"$asyncValidators": {},"$parsers": [],"$formatters": [ null ],"$viewChangeListeners": [],"$untouched": true,"$touched": false,"$pristine": true,"$dirty": false,"$valid": false,"$invalid": true,"$error": { "required": true },"$name": "email","$options": null } ] },"$name": "theForm","$submitted": false,"email": { "$validators": {},"$formatters": [ null ],"$error": { "required": true },"$options": null },"sex": { "$validators": {},"$formatters": [],"$valid": true,"$invalid": false,"$error": {},"$name": "sex","$options": null } }

以上，凡是有name属性的input都被显示在上面。

在second.js文件中定义了module,controller以及提交表单的方法。

myApp1.controller('myCtrl1',function($scope,$http){
$scope.formModel = {};

$scope.onSubmit = function(){
$http.post('someurl',$scope.formModel)
.success(function(data){
console.log(':)');
})
.error(function(data){
console.log(':(');
});

console.log($scope.formModel);
};
});

以上的表单验证方式好处是可控性强，但相对繁琐。

以上就是本文的全部内容，希望对AngularJS手动表单验证能够熟练操作。

AngularJS手动表单验证