AngularJS学习笔记3——表单

双向绑定

使用 ngModel 指令将输入框与 model 进行绑定,如: <input type="text" ng-model="text" name="text" />
当输入框或者 model 的值其中一方改变都会影响另一方。

表单验证

之前表单验证都是用的 jquery-validation 这个插件,这需要编写大量的 js 代码用于逻辑控制,
现在改用 angularjs 之后方便了许多,不过还是要编写大量的视图代码。

一个简单的例子: https://github.com/wusuopu/angularjs-practice/blob/master/static/form/validate.html

1
2
3
4
5
6
7
8
9
<form action="#" name="user_form" ng-submit="submitForm(user_form.$valid, $event)" novalidate>
<div class="form-group" ng-class="{'has-error' : user_form.name.$invalid && user_form.name.$dirty, 'has-success' : user_form.name.$valid}">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="formData.name" required>
<p ng-show="user_form.name.$invalid && user_form.name.$dirty" class="help-block">You name is required.</p>
</div>
.....
</form>

首先为 form 表单设置 name 属性,并设置 novalidate 属性禁止浏览器使用 HTML5 自带的验证功能。
然后对于需要验证的字段添加相应的验证属性,angularjs 内建的验证规则如下:

  • email
  • max
  • maxlength
  • min
  • minlength
  • number
  • pattern
  • required
  • url
  • date
  • datetimelocal
  • time
  • week
  • month