AngularJS中的翻译表单验证

如果我没记错的话，您会考虑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();
  }
]);

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

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

柱塞示例