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>

如果用户点击“提交”按钮，他会看到：

enter image description here

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

也许您应该尝试使用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();
  }
]);

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

enter image description here

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

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。我真的将我想要的所有可想象的功能添加到一个疯狂的简单指令中。

没有更多的聚集形式，10行代码，1个输入（对不起，但总是觉得很荒谬）当你需要的唯一的小块是2行代码，仅此而已，即使输入为5验证者。并且不担心形式不会变得无效，我也照顾到了这一点，它们都处理好了“Angular”方式。

看看我的Github项目Angular-Validation ......我相信你会爱上它=）
样本
在Plunker

上添加了一个实时演示

AngularJS中的翻译表单验证

2 个答案: