提交时的 AngularJS 表单验证

在 Web 应用中，表单验证是必不可少的一部分。AngularJS 提供了内置的验证机制，使开发者能够轻松地实现表单验证。本文将介绍如何在提交表单时进行验证。

表单验证

在 AngularJS 中，表单验证使用 ngModel 指令及其内置的属性来完成。ngModel 指令用于绑定表单元素和 AngularJS 中的模型数据。

<input type="text" ng-model="username" required />

上面的代码中，input 元素使用了 ngModel 指令，并且设置了 required 属性。这样，当用户提交表单时，如果 username 没有值，就会触发验证错误，并且阻止表单提交。

如果表单中的某个表单元素未通过验证，就会将表单的 $invalid 属性设置为 true。开发者可以利用这个属性来进行后续的操作。

<form name="signinForm" ng-submit="submitForm()" novalidate>
    <input type="text" name="username" ng-model="username" required />
    <input type="password" name="password" ng-model="password" required />
    <button type="submit" ng-disabled="signinForm.$invalid">Sign In</button>
</form>

在上面的示例中，我们使用了 ng-disabled 属性，来控制提交按钮是否可用。只有当表单中的所有必填字段都通过验证时，提交按钮才能够被点击。

自定义验证

除了内置的验证属性，AngularJS 还支持自定义验证。开发者可以使用 AngularJS 自定义指令来实现自定义验证。

下面的示例中，我们创建了一个名为 uniqueUsername 的自定义指令，用于验证用户名是否唯一。这个自定义指令可以在表单元素中使用。

angular.module('app').directive('uniqueUsername', function($http) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
                var value = modelValue || viewValue;
                return $http.get('/api/uniqueUsername', { params: { username: value } }).then(function(response) {
                    if (response.data.result) {
                        return true;
                    }
                    return $q.reject('Username already exists');
                });
            };
        }
    };
});

在上面的示例中，我们使用了 $http 服务来向服务器发起验证请求。如果返回结果中 result 字段为 true，则认为验证通过；否则，返回错误信息。

在表单元素中使用自定义指令时，只需要添加相应的属性即可。

<form name="signupForm" ng-submit="submitForm()" novalidate>
    <input type="text" name="username" ng-model="username" required unique-username />
    <input type="password" name="password" ng-model="password" required />
    <button type="submit" ng-disabled="signupForm.$invalid">Sign Up</button>
</form>

总结

AngularJS 提供了内置的表单验证机制，同时也支持自定义验证。开发者可以根据自己的需求，实现定制化的表单验证功能。这些功能可以帮助开发者实现更加严格和精准的表单验证，提升用户体验。