AngularJS | 表格验证

在 AngularJS 中实现表格验证十分简单，只需使用表单和验证指令即可。下面将为大家详细介绍如何实现。

创建表格模板

首先需要创建一个包含表单的 HTML 模板：

<form name="myForm" ng-submit="submitForm()">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in persons">
        <td>
          <input type="text" ng-model="person.name" required>
          <div ng-messages="myForm['name' + $index].$error" ng-if="myForm.$submitted">
            <div ng-message="required">姓名是必填项</div>
          </div>
        </td>
        <td>
          <input type="number" ng-model="person.age" required>
          <div ng-messages="myForm['age' + $index].$error" ng-if="myForm.$submitted">
            <div ng-message="required">年龄是必填项</div>
          </div>
        </td>
        <td>
          <input type="email" ng-model="person.email" required>
          <div ng-messages="myForm['email' + $index].$error" ng-if="myForm.$submitted">
            <div ng-message="required">邮箱是必填项</div>
            <div ng-message="email">请输入有效的邮箱地址</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <button type="submit">提交</button>
</form>

上面的模板中包含了一个名为 myForm 的表单，其中包含了一个包含多个输入框的表格。

需要注意的是，每个输入框都使用了不同的 ng-model，并且都使用了 required 属性。此外，每个输入框的下面都使用了 ng-messages 指令来显示错误消息。

在下面的代码片段中可以看到上述代码的 Markdown 格式：

## 创建表格模板

首先需要创建一个包含表单的 HTML 模板：

```html
<form name="myForm" ng-submit="submitForm()">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in persons">
        <td>
          <input type="text" ng-model="person.name" required>
          <div ng-messages="myForm['name' + $index].$error" ng-if="myForm.$submitted">
            <div ng-message="required">姓名是必填项</div>
          </div>
        </td>
        <td>
          <input type="number" ng-model="person.age" required>
          <div ng-messages="myForm['age' + $index].$error" ng-if="myForm.$submitted">
            <div ng-message="required">年龄是必填项</div>
          </div>
        </td>
        <td>
          <input type="email" ng-model="person.email" required>
          <div ng-messages="myForm['email' + $index].$error" ng-if="myForm.$submitted">
            <div ng-message="required">邮箱是必填项</div>
            <div ng-message="email">请输入有效的邮箱地址</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <button type="submit">提交</button>
</form>

增加控制器

下一步需要在 app.js 中增加如下控制器：

app.controller('myCtrl', function($scope) {
  $scope.persons = [
    { name: '小明', age: 18, email: 'xiaoming@example.com' },
    { name: '小红', age: 20, email: 'xiaohong@example.com' },
    { name: '小张', age: 22, email: 'xiaozhang@example.com' }
  ];
  $scope.submitForm = function() {
    if ($scope.myForm.$valid) {
      console.log('表格数据正确');
    } else {
      console.log('表格数据有误');
    }
  };
});

在上述代码中，我们定义了一个名为 myCtrl 的控制器，其中包含了一个名为 persons 的数组和一个名为 submitForm 的函数。

persons 数组包含了一个包含多个对象的表格，submitForm 函数用于验证表格的数据是否正确。如果表格数据正确，则在控制台中输出 '表格数据正确'，否则输出 '表格数据有误'。

在下面的代码片段中可以看到上述代码的 Markdown 格式：

## 增加控制器

下一步需要在 app.js 中增加如下控制器：

```javascript
app.controller('myCtrl', function($scope) {
  $scope.persons = [
    { name: '小明', age: 18, email: 'xiaoming@example.com' },
    { name: '小红', age: 20, email: 'xiaohong@example.com' },
    { name: '小张', age: 22, email: 'xiaozhang@example.com' }
  ];
  $scope.submitForm = function() {
    if ($scope.myForm.$valid) {
      console.log('表格数据正确');
    } else {
      console.log('表格数据有误');
    }
  };
});

运行程序

最后，在 index.html 中创建一个包含 myCtrl 的 div 元素，并在 app.js 中创建一个 AngularJS 应用程序即可。此时，我们就成功地实现了表格验证功能。

在下面的代码片段中可以看到上述代码的 Markdown 格式：

## 运行程序

最后，在 index.html 中创建一个包含 `myCtrl` 的 div 元素，并在 app.js 中创建一个 AngularJS 应用程序即可。此时，我们就成功地实现了表格验证功能。