AngularJS自动表单验证


Posted in Javascript onFebruary 01, 2016

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>

页面如下:

<html>
<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 class="navbar navbar-inverse navbar-fixed-top">
 <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 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>
  • ladda属性值为bool值,true表示显示动态等待效果,false不显示动态等待效果,这里的submitting是scope中的一个属性
  • data-style="expand-right"表示在按钮的右侧显示动态等待效果

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

<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>

其中,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;
   });
 };
});

以上就是本文的全部内容,希望对AngularJS手动表单验证能够熟练操作。

Javascript 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
AngularJS手动表单验证
Feb 01 #Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 #Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 #Javascript
理解javascript中的严格模式
Feb 01 #Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
js 异步处理进度条
2010/04/01 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
node.js实现快速截图
2016/08/27 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
小程序实现密码输入框
2020/11/16 Javascript
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python简单读取json文件功能示例
2017/11/30 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
C语言编程练习
2012/04/02 面试题
大学生职业规划书的范本
2014/02/18 职场文书
知识竞赛活动方案
2014/02/18 职场文书
企业安全生产承诺书
2014/05/22 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
太空授课观后感
2015/06/17 职场文书
党员证明模板
2015/06/19 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Python装饰器的练习题
2021/11/23 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python