AngularJs表单校验功能实例代码

2023年6月10日下午8:09 • JavaScript

下面是关于AngularJS表单校验功能的完整攻略。

什么是AngularJS表单校验功能？

AngularJS表单校验功能是指将表单中的数据校验功能通过AngularJS框架实现，从而提供可靠的数据校验能力，增加应用程序的可靠性和安全性。利用AngularJS表单校验功能，可以简单而快速地添加表单校验功能，避免重复劳动和代码冗余。

AngularJS表单校验功能的基本原理

AngularJS表单校验功能基于AngularJS的模型绑定和表达式求值功能实现。该功能可通过AngularJS指令ng-model和属性ng-required实现。通过ng-model指定模型属性，使用ng-required指定该属性是否必填，再通过定义一些校验规则指令，如ng-minlength、ng-maxlength、ng-pattern等，来实现校验功能。

AngularJS表单校验功能的实现

一、简单示例

以下是一个简单的表单校验示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS表单校验功能实例代码</title>
    <script src="https://cdn.bootcss.com/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app>
    <form name="myForm">
        <p>用户名：<input type="text" name="username" ng-model="user.username" ng-required="true"></p>
        <p>密码：<input type="password" name="password" ng-model="user.password" ng-minlength="6" ng-maxlength="16" ng-pattern="/^[a-zA-Z]/"></p>
        <p>
            <input type="submit" value="提交" ng-disabled="myForm.$invalid">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

该例子中，表单中有一个用户名和一个密码输入框，分别通过ng-model指令绑定用户输入的数据到$scope.user.username和$scope.user.password属性中。用户名为必填字段，因此使用了ng-required="true"指令，密码长度必须在6到16个字符之间，且以字母开头，因此分别使用了ng-minlength、ng-maxlength和ng-pattern指令进行验证，并在最后使用ng-disabled指令控制提交按钮的禁用状态。

二、更复杂的示例

以下是一个更复杂的表单校验示例，其中添加了自定义校验器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS表单校验功能实例代码</title>
    <script src="https://cdn.bootcss.com/angular.js/1.7.5/angular.min.js"></script>
    <script>
    angular.module('myApp', [])
        .directive('nameValidator', function(){
            return {
                require: 'ngModel',
                link: function(scope, element, attr, ctrl) {
                    ctrl.$validators.uniqueName = function(modelValue, viewValue){
                        if(modelValue === 'John' || modelValue === 'Mary'){
                            return false;
                        }
                        return true;
                    }
                }
            }
        });
    </script>
</head>
<body ng-app="myApp">
    <form name="myForm">
        <p>用户名：<input type="text" name="username" ng-model="user.username" ng-required="true" name-validator></p>
        <div ng-show="myForm.username.$error">
            <span ng-show="myForm.username.$error.required">必填项</span>
            <span ng-show="myForm.username.$error.uniqueName">该用户名已被占用</span>
        </div>
        <p>密码：<input type="password" name="password" ng-model="user.password" ng-minlength="6" ng-maxlength="16" ng-pattern="/^[a-zA-Z]/"></p>
        <p>
            <input type="submit" value="提交" ng-disabled="myForm.$invalid">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

该例子中，添加了一个自定义指令name-validator，它实现了用户是否已经被占用的校验功能。在该指令定义中，使用内置的$validators服务实现了校验函数uniqueName，并在内部对输入的值进行了校验。在表单中，使用了ng-show指令根据不同的错误类型来显示错误信息。