当前位置: 首页 > 面试题库 >

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

欧阳君浩
2023-03-14
问题内容

我正在尝试使用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将对输入中的文本做出正确的反应,除非我不知道如何在此验证中使用比较来强制电子邮件保持一致,然后再允许用户提交表单。

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

任何帮助表示赞赏,谢谢


问题答案:

实现此目的的一种方法是使用自定义指令。这是一个使用自定义指令的示例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;
}


 类似资料:
  • 我想有一个没有自定义指令的解决方案,但如果这不能实现没有它,我会处理它。下面是一个用自定义指令解决类似问题的答案。 感谢您的帮助,谢谢

  • 问题内容: 我在AngularJS应用程序中创建了一个指令,该指令在我的应用程序中生成样式输入。看起来像这样: 它的模板是: 调用很简单: 我想为此字段创建验证,并添加了错误信息: 而showError是: 基本上,它是从《用AngularJS掌握Web应用程序开发》一书中复制的。我有一个问题,因为当我在控制台中登录表单时,我的名字是,而不是name属性,这里的值应该是“ name”。我究竟做错了

  • 我试图找到一个完整的模式列表,用于通过HTML5表单验证各种类型的输入,特别是、、等等,但我找不到任何模式。目前,这些输入验证的内置版本远非完美(甚至不检查输入的内容是否是电话号码)。所以我想知道,我可以使用哪些模式来验证用户在输入中输入了正确的格式? 以下是一些默认验证允许不允许的输入的例子: 这个字段允许在@后面有不正确域的电子邮件,它允许地址以破折号或句号开始或结束,这也是不允许的。因此,是

  • 主要内容:输入验证,应用代码,实例解析AngularJS 表单和控件可以验证输入的数据。 输入验证 在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。 AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。 客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。 应用代码 < !DOCTYPE html > < html > < script src= "http:/

  • 问题内容: 我是一个有角度的新手,我在角度的形式验证指令的工作方式上遇到了麻烦。 我知道我可以很容易地将指令添加到 各个字段 ,但是我正尝试添加一个验证,该验证将 比较两个表单字段 (两者都是模型的元素)。 这是一个表单框架: 简而言之,我想编写一条指令,并使用它来显示/隐藏if 和都有值but 。如何在一个指令中访问两个字段?指令是这项工作的正确工具吗? 问题答案: 剥皮猫的方法很多。 用法:

  • 问题内容: 我的联系页面形式如下, 需要为所有字段添加验证。谁能帮我在此反应形式中添加验证? 问题答案: 您应该避免使用refs,可以使用function来实现。 每次更改时,请更新已更改字段的状态。 然后,您可以轻松地检查该字段是否为空或您想要的其他内容。 您可以执行以下操作: 在此示例中,我仅对电子邮件和姓名进行了验证,但是您知道如何进行验证。其余的你可以自己做。 也许有更好的方法,但是您会明