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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
浅谈Vue.js
Mar 02 Javascript
Node.js安装配置图文教程
May 10 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 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设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js控制table合并具体实现
2014/02/20 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
nohup的用法
2014/08/10 面试题
父亲的菜园教学反思
2014/02/13 职场文书
个人专业技术总结
2015/03/05 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
经营场所使用证明
2015/06/19 职场文书
python实现图片批量压缩
2021/04/24 Python
JS代码编译器Monaco使用方法
2021/06/11 Javascript
js中Object.create实例用法详解
2021/10/05 Javascript