当输入字段无效时，如何让angularjs记录默认的html5验证消息？

在AngularJS中，当输入字段无效时，默认的HTML5验证消息可能不会被显示，因为AngularJS有自己的表单验证机制。如果你想在使用AngularJS的同时保留HTML5的验证消息，可以通过以下步骤来实现：

基础概念

HTML5验证：浏览器内置的表单验证功能，通过required、pattern等属性来验证输入。
AngularJS验证：AngularJS提供了自己的表单验证系统，通过ngModel和表单控制器来管理验证状态。

应用场景

表单提交前验证：确保用户在提交表单前输入有效数据。
实时反馈：在用户输入时即时显示错误信息。

实现方法

要在AngularJS中记录并显示默认的HTML5验证消息，可以通过以下步骤：

确保HTML5验证属性存在：在你的输入字段上使用required、pattern等HTML5验证属性。

<form name="myForm">
  <input type="text" name="username" ng-model="user.username" required pattern="[a-zA-Z0-9]+">
</form>

使用AngularJS显示错误消息：利用AngularJS的表单控制器和$error对象来显示错误消息。

<div ng-if="myForm.username.$error.required">
  Username is required.
</div>
<div ng-if="myForm.username.$error.pattern">
  Username must contain only letters and numbers.
</div>

结合HTML5和AngularJS验证：确保AngularJS的验证逻辑不会覆盖HTML5的默认行为。

app.directive('validateHtml5', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      ngModelCtrl.$validators.html5 = function(modelValue, viewValue) {
        // 这里可以添加自定义的验证逻辑，或者直接返回true让浏览器处理
        return true;
      };
    }
  };
});

然后在HTML中使用这个指令：

<input type="text" name="username" ng-model="user.username" required pattern="[a-zA-Z0-9]+" validate-html5>

遇到问题的原因及解决方法

如果HTML5验证消息没有显示，可能是因为AngularJS的验证覆盖了它。确保你的AngularJS验证逻辑不会阻止HTML5验证的执行。

解决方法：

确保novalidate属性没有添加到<form>标签上，因为这会禁用浏览器的默认验证。
使用自定义指令来协调AngularJS和HTML5的验证逻辑。

示例代码

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS HTML5 Validation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
  <form name="myForm" novalidate>
    <input type="text" name="username" ng-model="user.username" required pattern="[a-zA-Z0-9]+" validate-html5>
    <div ng-if="myForm.username.$error.required">
      Username is required.
    </div>
    <div ng-if="myForm.username.$error.pattern">
      Username must contain only letters and numbers.
    </div>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
  </form>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
      $scope.user = {};
    });
    app.directive('validateHtml5', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          ngModelCtrl.$validators.html5 = function(modelValue, viewValue) {
            return true;
          };
        }
      };
    });
  </script>
</body>
</html>

通过这种方式，你可以确保在使用AngularJS的同时，也能够利用HTML5的默认验证消息来提升用户体验。