AngularJs 入门系列-2 表单验证

对于平常的开发来讲，最多见的开发场景就是经过表单编辑数据，这里涉及的问题就是验证问题。

angularjs 内置已经支持了常见的验证方式，能够轻松实现表单验证。

1. 绑定

为了方便，咱们在 $scope 上下文对象上建立一个 model 来表示咱们编辑的内容。

$scope.model =  {
    id : 8,
    name: "alice",
    email: "alice@open.com"    
};

angularjs 的验证须要表单的配合，为了可以访问表单，咱们须要为表单起一个名字，相应的编辑项也须要有一个名字，使用 name 属性完成，这样咱们能够访问到这个编辑项。使用 ng-model 实现与模型的双向绑定。固然了，提交数据并不须要表单。

<form name="myForm">
    <div>
        <label>Id:
            <input type="number" name="myId" ng-model="model.id" /></label>
    </div>
    <div>
        <label>Name:
            <input type="text" name="myName" ng-model="model.name" /></label>
    </div>
    <div>
        <label>Email:
            <input type="email" name="myEmail" ng-model="model.email" /></label>
    </div>
    <div>
        <button type="submit">Save</button>
    </div>
</form>

如今，运行页面，应该能够看到模型的内容已经被绑定到了编辑项中。

2. 验证结果

 

angularjs 内置了对于验证的支持，因此，如今表单已经被验证了，什么？我怎么没有看到任何提示呢？angularjs 将验证的结果保存在模型上，你须要本身在视图上展现出来。

$valid 

表单是否经过验证能够经过表单对象的 $valid 来获取，经过验证为真，没有经过为假。

<i>myForm.$valid: {{myForm.$valid}}</i>

你会看到其实 angularjs 已经在 $scope 上建立了一个与你的表单同名的对象，这里所说的 $valid 实际上是这个对象的一个属性。咱们经过这个属性来知道表单是否经过了验证。

$invalid

这个属性与 $valid 正好相反，是没有经过验证为真，经过了为假。

有什么用呢？

考虑这样的场景，咱们但愿提交按钮在表单经过验证的状况下可用，没有经过验证则禁用，就能够这样实现。

<button type="submit"ng-disabled="myForm.$invalid">Save</button>

也就是 $invalid 为真则禁用，不然启用。

$pristine

用户是否与表单进行过交互呢？能够经过 $pristine 来知道，用户自打开页面尚未编辑过表单的任何内容，$pristine 返回真，不然，返回假。

$dirty

这个正好与 $pristine 相反，只要表单一旦被编辑，哪怕从新修改回了原来的内容，也是修改过，数据已经变脏了。

$error

表单验证中，哪一个验证经过了，哪一个验证没有经过，均可以从 $error 中获取详细的信息。

上面的这些状态不只表单有，每一个编辑对象也有，咱们也能够获取每一个编辑对象的上述 5 中状态。

<ul>
    <li><i>myForm.$valid: {{myForm.$valid}}</i></li>
    <li><i>myForm.$invalid: {{myForm.$invalid}}</i></li>
    <li><i>myForm.$dirty {{myForm.$dirty}}</i></li>
    <li><i>myForm.$pristine {{myForm.$pristine}}</i></li>
    <li><i>myForm.$error {{myForm.$error}}</i></li>
</ul>
<ul>
    <li><i>myForm.myName.$valid {{myForm.myName.$valid}}</i></li>
    <li><i>myForm.myName.$error {{myForm.myName.$error}}</i></li>
</ul>

 

3. 验证

angularjs 可以验证哪些内容呢？

能够分为基本验证和高级验证两个部分

基本验证

基本验证是指 HTML5 直接提供的验证方式，好比必须提供的验证，在 HTML5 中就有 required 属性来表示。

另外 input 元素的 type 属性实际上也对数据类型进行了验证，好比输入电子邮件地址的时候，显然应该包含一个 @ 符号。

这些类型以下：

• number
• email
• url
• text
• checkbox
• radio 

 

高级验证

基本验证显然不能知足的须要，angularjs 提供了本身的高级验证指令。这些指令都支持表达式。

ng-minlength

一看就知道，用来设置最少长度

ng-maxlength

设置最大长度

<input type="text" name="myName" required ng-minlength="3" ng-maxlength="6" ng-model="model.name" />

 

ng-required

required 不是在 HTML5 中已经提供了吗？这个能够实现动态的是否必须，你能够绑定一个模型来表示如今这个编辑框是否必须。

在模型上设置是否必须。

$scope.requireValue = true;

而后，动态绑定到元素上

<input type="text" name="myName" ng-model="model.name" ng-required="requireValue"/>

 

ng-pattern

前面的太简单了？给你一个正则总能够了，就看你的正则功力了。

好比说，但愿验证输入的内容都是 0-9 数字 ，就既能够直接写一个正则表达式常量，也能够绑定一个变量。

$scope.matchPattern = /\d+/;

视图中。

<input type="text" name="myName" ng-model="model.name" ng-required="requireValue" ng-minlength="3" ng-maxlength="6" ng-pattern="/\d+/" />

<input type="text" name="myName" ng-model="model.name" ng-required="requireValue" ng-minlength="3" ng-maxlength="6" ng-pattern="matchPattern" />

注意，在 javascript 中，/\d+/ 表示一个正则表达式对象。

ng-change

若是你但愿在编辑内容发生变化的时候，可以当即得到通知，以便进行自定义的处理，可使用 ng-change，与标准 HTML 元素的 change 不一样的是，在内容发生变化以后，这个表达式会被当即执行，而不是在用户退出编辑的时候。

$scope.myIdChanged = function (model) {
    console.info(model);
};

使用 ng-change

<input type="number" name="myId" ng-model="model.id" required ng-change="myIdChanged(model)" />

4. 验证结果的样式

当编辑项被验证以后，angularjs 会跟据验证的结果，为编辑项添加相应的样式。

• .ng-pristine
• ng-dirty
• ng-valid
• ng-invalid

你能够经过这些样式来修饰编辑项。

5. 显示错误提示信息

能够将错误提示信息预先加入页面相应的位置，默认不显示出来，在没有经过相应验证的状况下，再显示对应的错误提示信息。

ng-show 和 ng-hide 指令能够实现根据绑定表达式的结果来决定是否显示元素内容。

ngShow 和ngHide 容许咱们显示或隐藏不一样的元素。这有助于建立Angular应用时由于咱们的单页程序会有许多的移动部件随着应用状态的改变而来来去去。

这些指令的最伟大的部分就是咱们没必要使用CSS或者JS来操做显示仍是隐藏。这些都是由老练的Angular来完成。

<span ng-show="myForm.$invalid">表单验证失败</span>

 

5. 统一处理验证的错误提示信息

能够写一个函数统一处理全部的错误信息。

// 统一处理全部的错误提示信息
$scope.getErrorMessage = function (error) {
    if (angular.isDefined(error)) {
        if (error.required) {
            return "Please enter a value!";
        }
        else if (error.email) {
            return "Please enter a valid email address!";
        }
    }
};

而后，在视图中绑定这个函数

<span ng-show="myForm.$invalid">{{getErrorMessage(myForm.$error)}}</span>