ng-form-validation

angularjs 中的 form 验证

angularjs集成了常用的表单验证功能，使用它，你会发现非常的方便

novalidate

在form标签上加novalidate，用来关闭浏览器默认form验证行为

css

ng会在dom上加各种css表示状态，我们可以编写对应的css
ng-valid: 有效的
ng-invalid: 无效的
ng-valid-[key]: 由$setValidity产生，有效的值
ng-invalid-[key]: 由$setValidity产生，无效的值
ng-pristine: 数据还没有改变过
ng-dirty: 数据已变脏（已有改变）
ng-touched: 已被触摸过
ng-untouched: 未被触摸过
ng-pending: 未定的($asyncValidators产生)

验证关键词

required 必须的
pattern 正则模式
minlength 最小长度
maxlength 最大长度
min 最小
max 最大
integer 整数
email 电子邮件

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form name="loginform" novalidate>
    <fieldset class="form-group">
        <label for="user">username:</label>
        <input id="user" name="uName" class="form-control" type="text" placeholder="username" ng-model="name"
               required="">
        <div ng-show="loginform.$submitted || loginform.uName.$touched">
            <span ng-show="loginform.uName.$error.required" class="text-danger">username is required</span>
        </div>
    </fieldset>
    <fieldset class="form-group">
        <label for="pass">password:</label>
        <input id="pass" name="uPass" type="password" class="form-control" placeholder="password" ng-minlength=8
               ng-maxlength=50 ng-model="pass"
               required>
        <div ng-show="loginform.$submitted || loginform.uPass.$touched">
            <span ng-show="loginform.uPass.$error.required" class="text-danger">password is required</span>
            <span ng-show="loginform.uPass.$error.minlength" class="text-danger">password is required to be at least 8 characters</span>
            <span ng-show="loginform.uPass.$error.maxlength" class="text-danger">password cannot be longer than 50 characters</span>
        </div>
    </fieldset>
    <button ui-sref="app.home" ng-disabled="loginform.$invalid" class="btn btn-block btn-primary">login</button>
</form>

reference angularjs docs

原创文章 欢迎转载但请注明出处。http://beetle2013.github.io/blog/