首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS实现表单手动验证和表单自动验证

Posted in Javascript onDecember 09, 2015

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 >
 <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的另外一种表单验证方式是自动验证，即通过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"></script>
● module依赖：var myApp = angular.module("app", ["jcs-autoValidate"]);
为了实现错误信息本地化，还需要angular-localize这个第三方module：
● 安装：npm install angular-localize --save
● module依赖：var myApp = angular.module("app", ["localize"]);
● 引用：

<script src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../node_modules/angular-localize/angular-localize.min.js"></script>

此外，当点击提交表单按钮，需要禁用按钮并显示一种等待效果，需要用到angular-ladda这个第三方module:

● 安装：bower install angular-ladda --save
● module依赖：var myApp = angular.module("app", ["angular-ladda"]);
● 引用：

<link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/>

<script src="../bower_components/ladda/dist/spin.min.js"></script>
<script src="../bower_components/ladda/dist/ladda.min.js"></script>
<script src="../bower_components/angular-ladda/dist/angular-ladda.min.js"></script>

页面如下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
 <meta charset="gb2312">
 <title></title>
 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/>
 <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav >
 <div class="container">
  <div class="navbar-header">
   <a href="/" class="navbar-brand">Form Validating Auto</a>
  </div>
 </div>
</nav>
 
<div class="container main-content" ng-controller="myCtrl1">
 <!--novalidate让表单不要使用html验证-->
 <!--theForm变成scope的一个字段-->
 <form ng-submit="onSubmit()" novalidate="novalidate">
  <div class="form-group">
   <label for="name" class="control-label">Name</label>
   <input type="text" class="form-control" id="name" ng-model="formModel.name" required="required"/>
  </div>
 
  <div class="form-group">
   <label for="email" class="control-label">Email</label>
   <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required"/>
 
  </div>
 
  <div class="form-group">
   <label for="username" class="control-label">Username</label>
   <input type="text"
       class="form-control"
       id="username"
       ng-model="formModel.username"
       required="required"
       ng-pattern="/^[A-Za-z0-9_]{1,32}$/"
       ng-minlength="7"
       ng-pattern-err-type="badUsername"
    />
  </div>
 
  <div class="form-group">
   <label for="age" class="control-label">Age</label>
   <input type="number"
       class="form-control"
       id="age"
       ng-model="formModel.age"
       required="required"
       min="18"
       max="65"
       ng-min-err-type="tooYoung"
       ng-max-err-type="tooOld"
    />
  </div>
 
  <div class="form-group">
   <label for="sex" class="control-label">Sex</label>
   <select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required="required">
    <option value="">Please choose</option>
    <option value="male">Mail</option>
    <option value="femail">Femail</option>
   </select>
  </div>
 
  <div class="form-group">
   <label for="password" class="control-label">Password</label>
   <input type="text" class="form-control" id="password" ng-model="formModel.password" required="required" ng-minlength="6"/>
  </div>
 
  <div class="form-group">
   <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
   <button class="btn btn-primary"
       ladda = "submitting"
       data-style="expand-right"
       type="submit">
    <span ng-show="submitting">正在注册...</span>
    <span ng-show="!submitting">注册</span>
   </button>
  </div>
 
   <pre>
    {{formModel | json}}
   </pre>
 </form>
</div>
<script src="../node_modules/angular/angular.min.js"></script>
 
<script src="form_validation_auto.js"></script>
<script src="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>
<script src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../node_modules/angular-localize/angular-localize.min.js"></script>
 
<script src="../bower_components/ladda/dist/spin.min.js"></script>
<script src="../bower_components/ladda/dist/ladda.min.js"></script>
<script src="../bower_components/angular-ladda/dist/angular-ladda.min.js"></script>
 
</body>
</html>

以上，先看提交按钮：

<div >
 <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
 <button class="btn btn-primary"
     ladda = "submitting"
     data-style="expand-right"
     type="submit">
  <span ng-show="submitting">正在注册...</span>
  <span ng-show="!submitting">注册</span>
 </button>
</div>

● ladda属性值为bool值，true表示显示动态等待效果，false不显示动态等待效果，这里的submitting是scope中的一个属性
● data-style="expand-right"表示在按钮的右侧显示动态等待效果

再拿表单中的Age字段来说：

<div >
 <label for="age" class="control-label">Age</label>
 <input type="number"
     class="form-control"
     id="age"
     ng-model="formModel.age"
     required="required"
     min="18"
     max="65"
     ng-min-err-type="tooYoung"
     ng-max-err-type="tooOld"
  />
</div>

其中,min, max为AgularJS的directive,而ng-min-err-type是angular-auto-validate的directive。这里遵循的惯例是ng-AngularJS表单验证的directive名称-err-type，而tooYoung和tooOld的作用是什么，又是在哪里用上了呢？
是在module层面用上了，定义在了form_validation_auto.js文件中。

var myApp1 = angular.module('myApp1',['jcs-autoValidate','localize','angular-ladda']);
 
myApp1.run(function(defaultErrorMessageResolver){
  defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages){
    errorMessages['tooYoung'] = '年龄必须小于{0}';
    errorMessages['tooOld'] = '年龄不能大于{0}';
    errorMessages['badUsername'] = '用户名只能包含数字、字母或下划线';
  });
});
 
myApp1.controller('myCtrl1', function($scope, $http){
  $scope.formModel = {};
  $scope.submitting = false;
 
  $scope.onSubmit = function(){
 
    $scope.submitting = true;
    console.log('已提交');
    console.log($scope.formModel);
 
    $http.post('url',$scope.formModel)
      .success(function(data){
        console.log(':)');
        $scope.submitting = false;
      })
      .error(function(data){
        console.log(':(');
        $scope.submitting = false;
      });
  };
});

以上，在run方法中使用angular-auto-validate的defaultErrorMessageResolver服务，对错误信息进行为了自定义。页面上的tooYoung和tooOld和这里的errorMessages['tooYoung']和errorMessages['badUsername']对应。

本文的全部内容就为大家介绍到这里，希望对大家学习AngularJS实现表单验证有所帮助。

AngularJS实现表单手动验证和表单自动验证

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
javascript对象的相关操作小结
May 16 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
解决vue-cli创建项目的loader问题
Mar 13 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
js实现微信分享代码
Oct 11 #Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
常用的Javascript设计模式小结
Dec 09 #Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 #Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 #Javascript
详解JavaScript基本类型和引用类型
Dec 09 #Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 #Javascript
Flask(2) 裁剪图片(1) PIL(1) 验证码(1) 进度条(1) GCN(1) 鲲鹏(1) Pytesseract(1) Python(3) 信号同步(1)
You might like
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
js实现放大镜特效
2017/05/18 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python生成随机图形验证码详解
2017/11/08 Python
详解supervisor使用教程
2017/11/21 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python 元组操作总结
2019/09/18 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python3实现绘制二维点图
2019/12/04 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
英语专业应届生求职信范文
2013/11/15 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis