异常教程

AngularJS 输入验证（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，输入验证是确保数据安全与用户体验的关键环节。AngularJS 作为经典的前端框架，提供了丰富的内置功能和灵活的扩展机制，帮助开发者高效实现输入验证。本文将从基础概念出发，逐步讲解 AngularJS 输入验证的核心原理、内置指令、自定义方法及实际案例，帮助编程初学者和中级开发者快速掌握这一技能。

AngularJS 表单与输入验证基础

表单与 ngModel

在 AngularJS 中，表单（Form）是数据绑定的核心载体，而 ngModel 指令则是连接表单输入与模型数据的关键。通过 ngModel，输入框的值会实时同步到控制器的变量中。例如：

<form name="myForm">  
  <input type="text" name="username" ng-model="user.username">  
</form>

此时，myForm.username.$valid 将根据输入内容的合法性自动更新为布尔值（true 或 false）。

表单对象的验证状态

AngularJS 为每个表单和输入字段自动生成一个对象，包含验证状态属性，例如：

  • $valid: 是否通过所有验证
  • $pristine: 是否被用户修改过
  • $dirty: 是否被修改过（与 $pristine 相反）
  • $touched: 是否失去过焦点

这些属性可用于动态控制表单样式或提示信息。

AngularJS 内置验证指令详解

AngularJS 提供了多种内置指令，覆盖常见的验证场景，开发者无需手动编写复杂逻辑。

必填验证（required）

通过 required 指令可强制用户输入值。例如：

<input type="text" name="email" ng-model="user.email" required>

若未输入内容，myForm.email.$error.required 会返回 true。

数据类型验证（number, email）

  • number: 确保输入为数字
  • email: 校验邮箱格式

示例：

<input type="number" name="age" ng-model="user.age" number>  
<input type="email" name="email" ng-model="user.email" email>

长度验证（minlength, maxlength）

控制输入的最小和最大长度：

<input type="text" name="password"  
       ng-model="user.password"  
       minlength="6"  
       maxlength="12">

其他常用指令对比

下表总结了 AngularJS 内置指令及其用途：

指令用途
required验证是否为空
number检查是否为数字
email校验邮箱格式
minlength设置最小长度
maxlength设置最大长度
pattern使用正则表达式验证

自定义输入验证方法

当内置指令无法满足需求时，可以通过两种方式扩展验证功能：自定义验证函数和自定义指令。

自定义验证函数

通过 $validators 钩子，在控制器中添加自定义逻辑。例如，验证密码是否包含大写字母：

app.controller('MyCtrl', function($scope) {  
  $scope.user = {};  
  // 自定义验证函数  
  $scope.user.password.$validators.uppercase = function(modelValue) {  
    return /[A-Z]/.test(modelValue);  
  };  
});

自定义指令

通过 directive 创建复用性更高的验证逻辑。例如，验证手机号格式：

app.directive('phoneValidator', function() {  
  return {  
    require: 'ngModel',  
    link: function(scope, element, attrs, ctrl) {  
      ctrl.$validators.phone = function(modelValue) {  
        return /^1[3-9]\d{9}$/.test(modelValue);  
      };  
    }  
  };  
});

在 HTML 中使用：

<input type="text" name="phone" ng-model="user.phone" phone-validator>

表单提交的条件控制

表单有效性的判断

通过 ng-submit 监听表单提交事件，并根据 $valid 属性决定是否执行提交逻辑：

<form name="myForm" ng-submit="submitForm()" novalidate>  
  <!-- 表单字段 -->  
  <button type="submit" ng-disabled="myForm.$invalid">提交</button>  
</form>

动态控制提交按钮

通过 $dirty 和 $touched 状态，可让提交按钮在用户修改后才可用：

<button ng-disabled="myForm.$invalid || myForm.$pristine">提交</button>

综合案例：用户注册表单实现

案例需求

实现一个包含以下字段的注册表单：

  1. 用户名（必填，长度 3-10 字符）
  2. 邮箱（必填，格式正确）
  3. 密码（必填，至少 6 位，包含大写字母）
  4. 确认密码（与密码一致）

HTML 结构

<form name="registerForm" ng-submit="register()" novalidate>  
  <!-- 用户名 -->  
  <input type="text" name="username"  
         ng-model="user.username"  
         required  
         minlength="3"  
         maxlength="10">  
  <!-- 邮箱 -->  
  <input type="email" name="email"  
         ng-model="user.email"  
         required>  
  <!-- 密码 -->  
  <input type="password" name="password"  
         ng-model="user.password"  
         required  
         minlength="6"  
         uppercase-validator>  
  <!-- 确认密码 -->  
  <input type="password" name="confirm"  
         ng-model="user.confirm"  
         required  
         compare-to="user.password">  
  <button type="submit" ng-disabled="registerForm.$invalid">注册</button>  
</form>

自定义验证函数

// 验证密码包含大写字母  
app.directive('uppercaseValidator', function() {  
  return {  
    require: 'ngModel',  
    link: function(scope, elem, attrs, ctrl) {  
      ctrl.$validators.uppercase = function(value) {  
        return /[A-Z]/.test(value);  
      };  
    }  
  };  
});  

// 验证确认密码与原密码一致  
app.directive('compareTo', function() {  
  return {  
    require: 'ngModel',  
    scope: {  
      compareTo: '='  
    },  
    link: function(scope, elem, attrs, ctrl) {  
      ctrl.$validators.match = function(modelValue) {  
        return modelValue === scope.compareTo;  
      };  
    }  
  };  
});

表单提交逻辑

app.controller('RegisterCtrl', function($scope) {  
  $scope.user = {};  
  $scope.register = function() {  
    if ($scope.registerForm.$valid) {  
      // 执行注册逻辑  
      console.log('提交成功:', $scope.user);  
    } else {  
      // 显示错误提示  
      console.log('表单无效，请检查输入');  
    }  
  };  
});

常见问题与解决方案

1. 表单未触发验证

原因：未添加 novalidate 属性，导致浏览器原生验证干扰。
解决：在表单标签中添加 novalidate：<form novalidate>...

2. 自定义指令未生效

原因：指令未正确注入或作用域未绑定。
解决：检查指令是否注册到模块，并确保 require: 'ngModel' 正确。

3. 动态验证条件不生效

原因：未使用 AngularJS 的脏检查机制。
解决：在修改验证规则后，手动触发 $scope.$apply() 或使用 $timeout。

结论

通过本文的讲解，读者可以掌握 AngularJS 输入验证的核心概念和实现方法。从内置指令的快速使用，到自定义验证的深度扩展，再到综合案例的实战演练，开发者能够灵活应对不同场景下的验证需求。输入验证不仅保障了数据的可靠性，也是提升用户体验的重要环节。建议读者通过实际项目练习，逐步优化验证逻辑，最终实现高效、安全的表单交互。

AngularJS 输入验证作为前端开发的基础技能，其核心思想同样适用于其他现代框架（如 Vue、React）。掌握这一技能后，开发者可以更自信地构建健壮的 Web 应用。

最新发布

查看更多文章