您好,欢迎访问一九零五行业门户网

教你用AngularJS框架一行JS代码实现控件验证效果_AngularJS

如上图所示,我们需要实现如下这些验证功能:
控件都是必输控件
都需要控制最大长度
第一次打开页面,控件不能显示为错误状态
输入内容再清空后,必输控件需要显示为错误状态
只有所有输入合法后,发布按钮才能变为可用状态
通过angularjs,我们可以很轻松的实现这些要求,只需要1行js代码。ui样式这里采用的是bootstrap。先上示例代码:
html。
demo 您的称呼*
邮箱地址*
主题*
内容*

js代码(真的只有一行哟)
contractcreatecontroller.js
var ftitappmodule = angular.module('ftitapp', []);
这样就好啦。几个关键的地方解释一下:
ng-class:这个标签用来控制class的值。例如ng-class={'has-success' : !createcontactform.content.$pristine}的意思就是,如果!createcontactform.content.$pristine的值为true,class的值就为has-success。
ng-show:控制是否显示该控件。
createcontactform.$valid:全部验证通过后,值为true,否则为false
createcontactform.content.$valid:标识content控件是否通过验证,通过为true,否则为false
createcontactform.content.$pristine:标识content控件是否从未输入过。从未输入为true,否则为false
更细节的技术问题请查看angularjs的技术文档。
其它类似信息

推荐信息