前端相关

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