Javascript 如何检查表格中几个必填字段的有效性？

我有一个名为“myForm”的表单，我有很多必填字段

<input type="text" name="form.user.name" ng-model="form.user.name" required/>
<input type="text" name="form.user.email" ng-model="form.user.email" required/>
<input type="text" name="form.user.phone" ng-model="form.user.phone" required/>

<input type="text" name="form.user.accountNumber" ng-model="form.bank.accountNumber" required/>
<input type="text" name="form.user.accountName" ng-model="form.bank.accountName" required/>

现在我只想检查一下

form.user

信息的有效性。我该怎么做呢？

你可以试试

当您将

标记放入ngApp中时，AngularJS会自动添加表单控制器（实际上有一个名为

form

的指令，用于添加Nesseary行为）

因此，要检查表单有效性，可以检查scope的

$scope.yourformname.$valid

属性的值

每个输入的

名称

的验证信息在

表单

的作用域名称中作为属性公开

HTML

---

有关表单的更多信息，请访问开发者部分。

首先浏览此链接

自定义验证示例

<form name="form" class="css-form" novalidate>
  <div>
    <label>
    Size (integer 0 - 10):
    <input type="number" ng-model="size" name="size"
           min="0" max="10" integer />{{size}}</label><br />
    <span ng-show="form.size.$error.integer">The value is not a valid integer!</span>
    <span ng-show="form.size.$error.min || form.size.$error.max">
      The value must be in range 0 to 10!</span>
  </div>

</form>

脚本

var app = angular.module('form-example1', []);

var INTEGER_REGEXP = /^-?\d+$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.integer = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    }
  };
});

参考角度验证 给不同的名字。最后三种输入类型的名称相同

   <input type="text" name="form.user.name" ng-model="form.user.name" required/>
<input type="text" name="form.user.email" ng-model="form.user.email" required/>
<input type="text" name="form.user.phone" ng-model="form.user.phone" required/> // same name all three name="form.user.phone"

<input type="text" name="form.user.phone" ng-model="form.bank.accountNumber" required/> // same name all three name="form.user.phone"
<input type="text" name="form.user.phone" ng-model="form.bank.accountName" required/> // same name all three name="form.user.phone"

//三个名称都相同name=“form.user.phone”
//三个名称都相同name=“form.user.phone”
//三个名称都相同name=“form.user.phone”

检查位置？在html中还是在控制器中？表格上的名字是什么？需要那个来访问验证对象我读了两遍问题，仍然不清楚你们想要什么。我想在HTML中检查它。如果用户文件已填写完毕，则“下一步”按钮将启用，单击“下一步”后，将打开一个带有银行信息字段的选项卡。最好从学习角度形状验证教程开始

<span ng-show="form.size.$error.integer">The value is not a valid integer!</span>

var app = angular.module('form-example1', []);

var INTEGER_REGEXP = /^-?\d+$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.integer = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    }
  };
});

   <input type="text" name="form.user.name" ng-model="form.user.name" required/>
<input type="text" name="form.user.email" ng-model="form.user.email" required/>
<input type="text" name="form.user.phone" ng-model="form.user.phone" required/> // same name all three name="form.user.phone"

<input type="text" name="form.user.phone" ng-model="form.bank.accountNumber" required/> // same name all three name="form.user.phone"
<input type="text" name="form.user.phone" ng-model="form.bank.accountName" required/> // same name all three name="form.user.phone"