AngularJS手动表单验证


Posted in Javascript onFebruary 01, 2016

所谓手动验证是通过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手动表单验证能够熟练操作。

Javascript 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 #Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 #Javascript
理解javascript中的严格模式
Feb 01 #Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 #Javascript
jQuery 3.0 的变化及使用方法
Feb 01 #Javascript
jQuery与Ajax以及序列化
Feb 01 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
十天学会php之第八天
2006/10/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
python获得一个月有多少天的方法
2015/06/04 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python编写登陆接口的方法
2017/07/10 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python实现微信自动回复机器人功能
2019/07/11 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
教师党员自我评价2015
2015/03/04 职场文书
初中思想品德教学反思
2016/02/24 职场文书