封面

angularjs的验证系统

使用angularjs的验证系统来做前端验证需要注意的一些地方

一、 效果图

angularjs验证效果图

二、 要点

1:form

给form起一个名字,并禁掉原生的验证

2. 显示时机

这个div是要在内容发生变化且不合法才会显示

<div class="error" ng-show="addBlogForm.title.$dirty && addBlogForm.title.$invalid">
<small class="error" ng-show="addBlogForm.title.$error.required">请输入标题内容</small>
<small class="error" ng-show="addBlogForm.title.$error.minlength">标题内容最少长度为3</small>
<small class="error" ng-show="addBlogForm.title.$error.maxlength">标题最大长度为64</small>
<small class="error" ng-show="addBlogForm.title.$error.unique">
这个标题己经被用过了,请换一个标题吧
</small>
</div>

3. 格式

格式为fromName.inputName.$error.xxx 例子如上

4. 判断

将提交按钮是否可用交给ng来判断:合法的时候才可用

代码示例

<button ng-click="addBlog()" class="btn btn-info" ng-disabled="addBlogForm.$invalid">添加博客

三、插件

以上介绍的是angularjs的原生的验证,下面是一些关于验证的扩展插件

所属 名字
angular-ui ng-messages
第三方扩展 w5cValidator
jquery-validate JQ的插件

四、 github

附上我github的地址
https://github.com/syoubaku

文章目录
  1. 1. 一、 效果图
  2. 2. 二、 要点
    1. 2.1. 1:form
    2. 2.2. 2. 显示时机
    3. 2.3. 3. 格式
    4. 2.4. 4. 判断
  3. 3. 三、插件
  4. 4. 四、 github
twitter分享
Fork me on GitHub