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>