Fatal编程技术网
  • javascript/
  • Javascript 使用angularjs进行表单验证

Javascript 使用angularjs进行表单验证

javascript html angularjs

Javascript 使用angularjs进行表单验证,javascript,html,angularjs,Javascript,Html,Angularjs,我想以角度的方式对表单进行验证。我有三个输入框。输入其中一项时，所有三项都是必需的。否则，不需要它们。只有在输入或未输入所有三个选项时，才能启用“继续”按钮 您可以在上查看代码。 这里还有一个片段，以防plunker不方便： angular.module（'test'，[]）.config（function（）{}）； 角度.module（'test'）.controller（'testctrl'，函数（$rootScope，$scope，$location）{ $scope.admin=[{

我想以角度的方式对表单进行验证。我有三个输入框。输入其中一项时，所有三项都是必需的。否则，不需要它们。只有在输入或未输入所有三个选项时，才能启用“继续”按钮

您可以在上查看代码。 这里还有一个片段，以防plunker不方便：

angular.module（'test'，[]）.config（function（）{}）；
角度.module（'test'）.controller（'testctrl'，函数（$rootScope，$scope，$location）{
$scope.admin=[{
“编号”：“2”
}];
$scope.adminfos={}；
$scope.validations={}；
});


名字是必需的


姓是必需的


电子邮件是必需的




继续

您不需要执行ng required，您只需将其替换为简单的“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>




名字是必需的


姓是必需的


电子邮件是必需的




继续

您的
ng required
条件错误，请将您的ng required条件更改为使用或（
|
），而不是所有字段的
&


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



检查此项，它可以工作。
您有一个逻辑缺陷。ng必填项应为或（| |）非和（&&）。见下面的叉子








请注意，请将这个复杂的UI逻辑放在控制器上的一个方法中：）
只有当其中一个字段是必需的，而另外两个字段是必需的时，才需要它。它可以是任何顺序。否则你可以点击continue。我是否理解正确，当没有或全部三个输入时，continue按钮应该被启用？如果没有，我不确定我是否完全理解这些要求。只有在任何其他文件中有值时才需要一个字段，否则它不是必需的。

<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" />