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 相关文章推荐
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
javascript操作excel生成报表示例
May 08 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
详解Vue中watch的高级用法
May 02 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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上传、管理照片示例
2006/10/09 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php日期操作技巧小结
2016/06/25 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
python二叉树的实现实例
2013/11/21 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
TensorFlow实现模型评估
2018/09/07 Python
Python中反射和描述器总结
2018/09/23 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
北京天润融通.net面试题笔试题
2012/02/20 面试题
两年的个人工作自我评价
2014/01/10 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
如何写股份合作协议书
2014/09/11 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
清洁员岗位职责
2015/02/15 职场文书
公司管理制度范本
2015/08/03 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
python中的sys模块和os模块
2022/03/20 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript