使用javascript或angular 1进行多个文本框验证

时间:2018-05-24 14:31:39

标签: javascript html angularjs

我有三个文本框和一个提交按钮。仅当3个文本框中的任何一个文本中有文本时才需要启用提交按钮,否则需要删除该按钮。在angular1或javascript中实现此验证的代码是什么?以下是我的代码

First name:
<br>
<input type="text" id="textsend1" name="firstname1" value="Mickey">
<br>
Last name:<br>
<input type="text" id="textsend2" name="lastname" value="Mouse">
<br>
<br>
<input type="text" id="textsend3" name="firstname" value="Mickey">
<br>
<br>
<input type="submit" value="Submit" ng-disabled>

2 个答案:

答案 0 :(得分:0)

尝试添加一个类来启用或禁用de按钮,检查此url或只使用ng-disabled

答案 1 :(得分:0)

您可以使用表单和ng-required来完成此操作。有3个文本框,它是可管理的,但如果你开始获得更多它可能会有点混乱。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.firstname = '';
    $scope.middlename = '';
    $scope.lastname = '';
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="myForm">
    First name:<br>
    <input type="text" 
           name="firstname" 
           ng-model="firstname" 
           ng-required="!middlename && !lastname"><br>     
    Middle name:<br>
    <input type="text" 
           name="middlename" 
           ng-model="middlename" 
           ng-required="!firstname && !lastname"><br>
    Last name:<br>
    <input type="text" 
           name="lastname" 
           ng-model="lastname" 
           ng-required="!firstname && !middlename"><br><br>
    <input type="submit" 
           value="Submit" 
           ng-disabled="myForm.$invalid">
  </form>
</div>