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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
司法助理专业自荐书
2014/06/13 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
老兵退伍感言
2015/08/03 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技