使用angularjs进行表单验证

我想以角度方式对表单进行验证。我有三个输入框。当输入其中一个时，所有三个都是必需的。否则，他们不是必需的。只有在输入了三个或不输入时，才能启用继续按钮。使用angularjs进行表单验证

您可以查看this plunker上的代码。这里有一个片段，也以防万一plunker不便：

angular.module('test', []).config(function() {}); 
 

 
angular.module('test').controller('testctrl', function($rootScope, $scope, $location) { 
 
    $scope.admin = [{ 
 
    "number": "2" 
 
    }]; 
 
    $scope.adminInfos = {}; 
 
    $scope.validations = {}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form name="test_form"> 
 
    <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" /> 
 
    <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span> 
 
    <br/> 
 
    <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].email.length" /> 
 
    <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].firstname.length) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span> 
 
    <br/> 
 
    <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].lastname.length" /> 
 
    <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span> 
 

 
    <br/> 
 
    <br/> 
 

 
    <button ng-disabled="test_form.$invalid">Continue</button> 
 

 
</form>

我有一个问题，即继续，如果我输入名字按钮仍处于启用状态，并留下了姓名和电子邮件作为空白。

如果不输入全部三个或全部输入三个，则必须启用继续按钮。

来源

2015-09-23 user4925190

你ng-required条件是错误的，改变你的NG-要求的条件使用或（||），而不是&所有领域

ng-required="adminInfos[admin.number].lastname.length || adminInfos[admin.number].email.length"

检查这个plunker，它的工作原理..

来源

2015-09-23 14:57:34 ssilas777

哦..那真是个愚蠢的错误。不管怎么说，多谢拉！！ – user4925190

您不需要执行ng-required，只需将其替换为“必需”即可，以表明为使表单有效而需要。请看下图：

<!DOCTYPE html> 
<html ng-app="test"> 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller="testctrl"> 
    <form name="test_form"> 
    <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" required /> 
    <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span> 
    <br/> 
    <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" required /> 
    <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].firstname.length) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span> 
    <br/> 
    <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" required /> 
    <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span> 

    <br/> 
    <br/> 

    <button ng-disabled="test_form.$invalid">Continue</button> 

    </form> 
</body> 

</html>

来源

2015-09-23 14:53:24 cullimorer

它只有当领域之一是需要和要求其他两个。它可以以任何顺序。否则你可以继续下去。 – user4925190

我是否正确理解，当没有或全部三个输入时，应该启用继续按钮？如果不是，我不确定我是否完全理解这些要求。 – cullimorer

只有在任何其他文件中有值时才需要字段，否则不需要。 – ssilas777

你有一个逻辑缺陷。 ng-required应该是或（||）不是和（& &）。见下面的叉子。

Plunkr

<input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />

作为一个说明，请把这个复杂的UI逻辑的方法中的控制器上:)

来源

2015-09-23 14:59:58

使用angularjs进行表单验证

回答

相关问题