你的位置:首页 > Java教程

[Java教程]AngularJS使用ngMessages进行表单验证


 

名称为"ngMessages"的module,通过npm install angular-messages进行安装。在没有使用ngMessages之前,我们可能这样写验证:

 

<form name="userForm">  <input     type="text"     name="username"     ng-model="user.username"     ng-minlength="3"     ng-maxlength="8"    required>  <p ng-show="userForm.username.$error.minlength">Username is too short.</p>  <p ng-show="userForm.username.$error.maxlength">Username is too long.</p>  <p ng-show="userForm.username.$error.required">Your username is required.</p></form>

 

以上,列举了每种可能的验证失败,并且手工编写是否显示错误提示信息。


有了"ngMessages"这个module,大致这么写:

 

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched"> <p ng-message="minlength">用户名最小长度5</p> <p ng-message="maxlength">用户名最大长度10</p> <p ng-message="required">用户名必填</p></div>

 

ngMessages为我们自动判断显示哪种错误。


使用ngMessages的几个关键点:

● npm install angular-messages
● 引用:angular-messages.js
● 依赖:angular.module('app',['ngMessages'])

 

这里有一个简单的Demo,文件结构:

node_modules/
app.js
emailmessages.html
index.html

 

安装如下:

npm install bootstrap
npm install angular
npm install angular-messages

 

==index.html

 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/> <style>  body{   padding-top: 50px;  } </style></head><body class="container" ng-app="app" ng-controller="MainCtrl as main"><form name="userForm" novalidate> <div class="form-group" ng-class="{'has-error':userForm.name.$touched && userForm.name.$invalid}">  <label>用户名</label>  <input type="text" name="name" class="form-control"   ng-model="main.name"   ng-minlength="5"   ng-maxlength="10" required/>  <div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">   <p ng-message="minlength">用户名最小长度5</p>   <p ng-message="maxlength">用户名最大长度10</p>   <p ng-message="required">用户名必填</p>  </div> </div> <div class="form-group" ng-class="{'has-error':userForm.email.$touched && userForm.email.$invalid}">  <label>邮箱</label>  <input type="email" name="email" class="form-control"   ng-model="main.email"   ng-minlength="5"   ng-maxlength="20" required/>  <div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">   <div ng-messages-include="emailmessages.html"></div>  </div> </div> <div class="form-group">  <button type="submit" class="btn btn-danger">提交</button> </div> <pre>{{userForm.name.$error}}</pre> <pre>{{userForm.email.$error}}</pre></form><script src="node_modules/angular/angular.min.js"></script><script src="node_modules/angular-messages/angular-messages.js"></script><script src="app.js"></script></body></html>

 

app.js

 

angular.module('app',['ngMessages'])  .controller('MainCtrl', MainCtrl);function MainCtrl(){}

 

emailmessages.html

 

把有关email的表单验证放在这里,通过<div ng-messages-include="emailmessages.html"></div>显示到页面某个位置上。

 

<p ng-message="required">邮箱必填</p><p ng-message="minlength">邮箱长度太短</p><p ng-message="maxlength">邮箱长度太长</p><p ng-message="email">邮箱无效</p>