在 AngularJS 中，可以通过编写指令来扩展 HTML 元素的功能。本文将介绍如何使用 password-check 指令实现两个密码输入框的匹配验证。
实现思路
首先，在 HTML 中创建两个密码输入框，并绑定到相应的模型：
<label>密码：<input type="password" ng-model="password"></label> <label>确认密码：<input type="password" ng-model="confirmPassword"></label>
然后，在 JavaScript 中定义 password-check 指令，并将其作为属性添加到确认密码输入框中：
-- -------------------- ---- -------
----------------------- ---
--------------------------- ---------- -
------ -
-------- ----------
----- --------------- -------- ------ ----- -
--- ------------- - --- - --------------------
-------------------------------------- ---------- -
----------------------- -
--- - - ---------------------------------------
---------------------------------- ---
---
---
-
-
---在这个指令中，我们通过 require: 'ngModel' 指定了需要访问该元素的 ngModel 控制器。然后，在 link 函数中，我们获取了第一个密码输入框的选择器，并监听两个输入框的 keyup 事件。每次触发事件时，我们都会将两个密码进行比较，并将比较结果通过 ctrl.$setValidity() 方法告诉 ngModel 控制器。
最后，将 password-check 属性添加到确认密码输入框中：
<label>确认密码：<input type="password" ng-model="confirmPassword" password-check="password"></label>
这样，就完成了两个密码输入框的匹配验证。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
--------------- -------------
------- ------------------------------------------------------------------------------------
--------
----------------------- ---
--------------------------- ---------- -
------ -
-------- ----------
----- --------------- -------- ------ ----- -
--- ------------- - --- - --------------------
-------------------------------------- ---------- -
----------------------- -
--- - - ---------------------------------------
---------------------------------- ---
---
---
-
-
---
---------
-------
------
------------ ----------
------
---------------- --------------- ----------------------------
----
------------------ --------------- -------------------------- ----------------------------------
----
------- ----------------------------------------
-------
-------
-------结语
本文介绍了如何使用 AngularJS 的指令来实现密码匹配验证。通过编写指令，我们可以将这个功能封装成一个可复用的组件，并且避免了代码重复。希望本文能对初学者有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25214