ng-message 表单验证

来源：互联网发布：爽肤水怎么用知乎编辑：程序博客网时间：2024/06/08 16:31

表单在我们平时浏览网站是非常常见的，比较好的表单考虑到很多问题。首先最直观的便是它的设计感以及用户的体验是否良好。
不过今天我想说的是在angular中的表单验证，我们需要使用ngMessages进行表单验证。
首先我们需要安装npm install angular-messages
引用：angular-messages.js
依赖：angular.module(‘app’,[‘ngMessages’])
安装：
npm install bootstrap
npm install angular
npm install angular-messages
我做的一个demo,文件目录结构：

node_modules/
app.js
index.html

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" />    </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">                    <p ng-message="required">邮箱必填</p>                    <p ng-message="minlength">邮箱长度太短</p>                    <p ng-message="maxlength">邮箱长度太长</p>                    <p ng-message="email">邮箱无效</p>                </div>            </div>            <div class="form-group">                <button type="submit" class="btn btn-danger">提交</button>            </div>        </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', function($scope){})

0 0