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为搜索栏增加tag提示
Jun 22 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
JS判断数组那点事
Oct 10 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
JS实现self的resend
2010/07/22 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python hashlib模块用法实例分析
2018/06/12 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
类的返射机制中的包及核心类
2016/09/12 面试题
保洁主管岗位职责
2013/11/20 职场文书
学生爱国演讲稿
2014/01/14 职场文书
建设工程授权委托书
2014/09/22 职场文书
2016情人节宣传语
2015/07/14 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
使用python绘制横竖条形图
2022/04/21 Python