使用AngularJS在表单验证中比较两个输入值

一尘不染

使用AngularJS在表单验证中比较两个输入值

angularjs

我正在尝试使用AngularJS进行表单验证。我对比较两个值特别感兴趣。我希望用户在继续之前确认他输入的一些数据。可以说我有以下代码：

<p>
    Email:<input type="email" name="email1" ng-model="emailReg">
    Repeat Email:<input type="email" name="email2" ng-model="emailReg2">
<p>

然后我可以将验证用于：

<span ng-show="registerForm.email1.$error.required">Required!</span>
<span ng-show="registerForm.email1.$error.email">Not valid email!</span>
<span ng-show="emailReg !== emailReg2">Emails have to match!</span>  <-- see this line

registerForm。$ valid将对输入中的文本做出正确的反应，除非我不知道如何在此验证中使用比较来强制电子邮件保持一致，然后再允许用户提交表单。

我很想有一个没有自定义指令的解决方案，但是如果没有它就无法实现，我会处理。这是一个使用自定义指令解决类似问题的答案。

任何帮助表示赞赏，谢谢

阅读 276

2020-07-04

共1个答案

一尘不染

实现此目的的一种方法是使用自定义指令。这是一个使用自定义指令的示例（ng-match在这种情况下）：

<p>Email:<input type="email" name="email1" ng-model="emailReg">
Repeat Email:<input type="email" name="email2" ng-model="emailReg2" ng-match="emailReg"></p>

<span data-ng-show="myForm.emailReg2.$error.match">Emails have to match!</span>

注意：通常不建议将其ng-用作自定义指令的前缀，因为它可能与官方的AngularJS指令冲突。

更新资料

也可以在不使用自定义指令的情况下获得此功能：

的HTML

<button ng-click="add()></button>
<span ng-show="IsMatch">Emails have to match!</span>

控制者

$scope.add = function() {
  if ($scope.emailReg != $scope.emailReg2) {
    $scope.IsMatch=true;
    return false;
  }
  $scope.IsMatch=false;
}

2020-07-04