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>