AngularJS 中的翻译表单验证

Question

将 Angular 提供的表单验证中的默认错误消息更改为另一种语言的最简单方法是什么？

Answer 1

如果我没记错的话，你会考虑 html5 验证。

类似这样的：

<b>HTML5 validation</b>
<form>
  First name:
  <input type="text" name="firstName" required="" />
  <br />
  Last name:
  <input type="text" name="lastName" required="" />
  <br />
  <input type="submit" value="Submit" />
</form>

如果用户点击提交按钮，他将看到：

我认为您无法更改此错误注释，因为它取决于用户浏览器/计算机设置。

也许你应该尝试使用 angularjs 验证（首先添加到表单 novalidate 以关闭 HTML5 验证）：

HTML

<div ng-controller="PersonController">
  <b>AngularJS validation</b>
  <form novalidate name="myForm">
    First name:
    <input type="text" name="firstName" ng-model="newPerson.firstName" required="" />
    <span style="color: red" ng-show="myForm.firstName.$dirty && myForm.firstName.$invalid">First name is required</span>
    <br />
    Last name:
    <input type="text" name="lastName" ng-model="newPerson.lastName" required="" />
    <span style="color: red" ng-show="myForm.lastName.$dirty && myForm.lastName.$invalid">Last name is required</span>
    <br />
    <button ng-click="resetPerson()">Reset</button>
    <button ng-click="addPerson()" ng-disabled="myForm.$invalid">Save</button>
  </form>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('PersonController', ['$scope',
  function($scope) {

    var emptyPerson = {
      firstName: null,
      lastName: null
    };

    $scope.addPerson = function() {
      alert('New person added ' + $scope.newPerson.firstName + ' ' + $scope.newPerson.lastName);
      $scope.resetAdvert();
    };

    $scope.resetPerson = function() {
      $scope.newPerson = angular.copy(emptyPerson);
      // I don't know why not work in plunker
      //$scope.myForm.$setPristine();
    };

    $scope.resetPerson();
  }
]);

如果用户填写该字段并擦除，他将看到错误信息：

如果用户未填写必填字段，提交按钮将被禁用。

Plunker example

Answer 2

你为什么不尝试一些简单的改变... :) 这是我的Angular-Validation。我在 Github 上做了一个项目，我认为你不能比这更简单......是的，我也支持翻译本地化，这些都保存到外部 JSON 文件中：

<!-- example 1 -->
<label for="input1">Simle Integer</label>
<input type="text" name="input1" validation="integer|required" ng-model="form1.input1" />
<span class="validation text-danger"></span>

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" name="input2" validation="alpha|exact_len:3|required" ng-model="form1.input2" />
<span class="validation text-danger"></span>

用于翻译语言环境的 JSON 外部文件

// English version, JSON file (en.json)
{
    "INVALID_ALPHA":        "May only contain letters. ",
    "INVALID_ALPHA_SPACE":  "May only contain letters and spaces. ",
    ...
}

// French version, JSON file (fr.json)
{
    "INVALID_ALPHA":        "Ne doit contenir que des lettres. ",
    "INVALID_ALPHA_SPACE":  "Ne doit contenir que des lettres et espaces. ",
    ...
}

除了支持多种翻译之外，该指令的验证非常简单，您一定会爱上它。我可以在 1 个属性下定义任意数量的验证规则（已经有 25+ 种可用的验证器）。 validation="min_len:2|max_len:10|required|integer" 和错误信息会一直显示在下面<span> 是不是很漂亮？我也这么认为呵呵... 1行代码输入，1行代码显示错误，你能打败它吗？哦，如果您想添加，我什至支持您的自定义正则表达式。另一个好处，我也支持你想要的任何触发事件，最常见的可能是onblur 和onkeyup。我真的将我想要的所有可以想象的功能添加到 1 个疯狂的简单指令中。

不再需要 10 行代码用于 1 个输入的集群表单（抱歉，但总是觉得这很荒谬）当您唯一需要的一小部分是 2 行代码，仅此而已，即使输入 5 个验证器也是如此它。不用担心表单不会变得无效，我也处理好了，这一切都以良好的“Angular”方式处理。

看看我的 Github 项目Angular-Validation...我相信你会喜欢的 =)
演示
在Plunker添加了一个现场演示