AngularJS使用ngMessages进行表单验证
AngularJS诞生于2009年,由MiskoHevery等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
名称为"ngMessages"的module,通过npminstallangular-messages进行安装。在没有使用ngMessages之前,我们可能这样写验证:
<formname="userForm"> <input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required> <png-show="userForm.username.$error.minlength">Usernameistooshort.</p> <png-show="userForm.username.$error.maxlength">Usernameistoolong.</p> <png-show="userForm.username.$error.required">Yourusernameisrequired.</p> </form>
以上,列举了每种可能的验证失败,并且手工编写是否显示错误提示信息。
有了"ngMessages"这个module,大致这么写:
<divclass="help-block"ng-messages="userForm.name.$error"ng-if="userForm.name.$touched"> <png-message="minlength">用户名最小长度5</p> <png-message="maxlength">用户名最大长度10</p> <png-message="required">用户名必填</p> </div>
ngMessages为我们自动判断显示哪种错误。
使用ngMessages的几个关键点:
●npminstallangular-messages
●引用:angular-messages.js
●依赖:angular.module('app',['ngMessages'])
这里有一个简单的Demo,文件结构:
node_modules/
app.js
emailmessages.html
index.html
安装如下:
npminstallbootstrap
npminstallangular
npminstallangular-messages
==index.html
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"href="node_modules/bootstrap/dist/css/bootstrap.min.css"/> <style> body{ padding-top:50px; } </style> </head> <bodyclass="container"ng-app="app"ng-controller="MainCtrlasmain"> <formname="userForm"novalidate> <divclass="form-group"ng-class="{'has-error':userForm.name.$touched&&userForm.name.$invalid}"> <label>用户名</label> <inputtype="text"name="name"class="form-control" ng-model="main.name" ng-minlength="5" ng-maxlength="10"required/> <divclass="help-block"ng-messages="userForm.name.$error"ng-if="userForm.name.$touched"> <png-message="minlength">用户名最小长度5</p> <png-message="maxlength">用户名最大长度10</p> <png-message="required">用户名必填</p> </div> </div> <divclass="form-group"ng-class="{'has-error':userForm.email.$touched&&userForm.email.$invalid}"> <label>邮箱</label> <inputtype="email"name="email"class="form-control" ng-model="main.email" ng-minlength="5" ng-maxlength="20"required/> <divclass="help-block"ng-messages="userForm.email.$error"ng-if="userForm.email.$touched"> <divng-messages-include="emailmessages.html"></div> </div> </div> <divclass="form-group"> <buttontype="submit"class="btnbtn-danger">提交</button> </div> <pre>{{userForm.name.$error}}</pre> <pre>{{userForm.email.$error}}</pre> </form> <scriptsrc="node_modules/angular/angular.min.js"></script> <scriptsrc="node_modules/angular-messages/angular-messages.js"></script> <scriptsrc="app.js"></script> </body> </html>
app.js
angular.module('app',['ngMessages']) .controller('MainCtrl',MainCtrl); functionMainCtrl(){ }
emailmessages.html
把有关email的表单验证放在这里,通过<divng-messages-include="emailmessages.html"></div>显示到页面某个位置上。
<png-message="required">邮箱必填</p> <png-message="minlength">邮箱长度太短</p> <png-message="maxlength">邮箱长度太长</p> <png-message="email">邮箱无效</p>
ps:常用的表单验证指令
1.必填项验证
某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:
<inputtype="text"required/>
2.最小长度
验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng="{number}":
<inputtype="text"ng-minlength="5"/>
3.最大长度
验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength="{number}":
<inputtype="text"ng-maxlength="20"/>
4.模式匹配
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:
<inputtype="text"ng-pattern="/[a-zA-Z]/"/>
5.电子邮件
验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:
<inputtype="email"name="email"ng-model="user.email"/>
6.数字
验证输入内容是否是数字,将input的类型设置为number:
<inputtype="number"name="age"ng-model="user.age"/>
7.URL
验证输入内容是否是URL,将input的类型设置为url:
<inputtype="url"name="homepage"ng-model="user.facebook_url"/>