AngularJS手动表单验证
所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件：
1、给form元素加上novalidate="novalidate"；
2、给form元素加上name="theForm"，
如下：
<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand">Form Submitting</a>
</div>
</div>
</nav>
<div class="container main-content" ng-controller="myCtrl1">
<!--novalidate让表单不要使用html验证-->
<!--theForm变成scope的一个字段-->
<form ng-submit="onSubmit(theForm.$valid)" novalidate="novalidate" name="theForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-model="formModel.name"/>
</div>
<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</label>
<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>
<p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确</p>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="formModel.username"/>
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" class="form-control" id="age" ng-model="formModel.age"/>
</div>
<div class="form-group">
<label for="sex">Sex</label>
<select name="sex" id="sex" class="form-control" ng-model="formModel.sex">
<option value="">Please choose</option>
<option value="male">Mail</option>
<option value="femail">Femail</option>
</select>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" ng-model="formModel.password"/>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Register</button>
</div>
<pre>
{{theForm | json}}
</pre>
</form>
</div>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="second.js"></script>
</body>
</html>
- ● 给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
- ● 通过<pre>{{theForm | json}}</pre>把AngularJS表单的所有属性都打印出来
{
"$error": {
"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",
"$dirty": false,
"$pristine": true,
"$valid": false,
"$invalid": true,
"$submitted": false,
"email": {
"$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
},
"sex": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "sex",
"$options": null
}
}
以上，凡是有name属性的input都被显示在上面。
在second.js文件中定义了module,controller以及提交表单的方法。
var myApp1 = angular.module('myApp1',[]);
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学习笔记之表单验证功能实例详解
本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="
-
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
本文实例讲述了AngularJS实现的获取焦点及失去焦点时的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/angular.js"></scr
-
基于AngularJS实现表单验证功能
本文实例为大家分享了AngularJS实现表单验证功能的具体代码,供大家参考,具体内容如下 <!--实例解析 ng-app 指令定义了 AngularJS 应用. ng-controller 指令定义了应用控制器. ng-model 指令绑定了两个 input 元素到模型的 user 对象. formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法. reset() 方法设置了 user 对象等于 master 对象. ng-click 指令调用了 reset()
-
AngularJS自动表单验证
AngularJS的另外一种表单验证方式是自动验证,即通过directive来实现,除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module. 有关angular-auto-validate: 安装:npm i angular-auto-validate 引用:<script src="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js&qu
-
AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: <some-form fiedls="vm.someFields" ...></some-form> 然后,在controller中定义各个字段以及验证.angular-formly就是为这个需求而存在. 在controller中,把各个字段定义在数组中: vm.rentalFields = [ { key:'first_name', type
-
AngularJS实现表单验证功能
AngularJS表单验证功能实现代码: ng-model的作用: 1.ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定 2.双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改 3.数据校验 4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error) 5.ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类 css内容: /*angularJS会根据表单的状态进行添加或者删除
-
基于angularJS的表单验证指令介绍
做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了. 这里使用AngularJS的指令进行处理代码及其简洁明了 下面是指令JS代码 app.directive('ccForm',['$parse',function ($parse) { return { restrict:'A', link:function (scope,element,attrs) { var first=true; var errors=0; var c
-
AngularJS表单验证功能分析
本文实例讲述了AngularJS表单验证功能.分享给大家供大家参考,具体如下: 在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例.在表单里面的每个input都会创建一个在这个实例下的ngModelController实例,用以控制每个input的行为. 首先先从简单的验证开始. AngularJs的ngModelController提供了几种属性:$pristine;$dirty;$valid;$invalid;$error pristine:
-
AngularJS中实现用户访问的身份认证和表单验证功能
身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们
-
AngularJS实现表单验证
虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&
-
AngularJS使用ngMessages进行表单验证
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="