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使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
Javascript模块化编程详解
Dec 01 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
php导出中文内容excel文件类实例
2015/07/06 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
管道维修工岗位职责
2013/12/27 职场文书
推广普通话标语
2014/06/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
新学期感想
2015/08/10 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript