如何在点击保存按钮且未输入值时抛出提示？仅用HTML或Angular实现

1. 纯HTML原生实现 #

不需要框架，用原生HTML+JS就能搞定，有两种常用方式：

手动判断版本（自定义提示） #

<form id="saveForm">
  <input type="text" id="contentInput" placeholder="请输入内容">
  <button type="submit">保存</button>
</form>

<script>
document.getElementById('saveForm').addEventListener('submit', function(e) {
  const inputVal = document.getElementById('contentInput').value.trim();
  if (!inputVal) {
    e.preventDefault(); // 阻止表单提交
    alert('输入框不能为空！');
    document.getElementById('contentInput').focus(); // 聚焦输入框，方便用户直接输入
  }
  // 输入非空时，在这里写保存逻辑
});
</script>

HTML5原生验证版本（浏览器自带提示） #

如果不需要自定义提示内容，直接用required属性更简洁：

<form>
  <input type="text" required placeholder="请输入内容">
  <button type="submit">保存</button>
</form>

点击保存时，浏览器会自动弹出默认的空字段提示，无需额外JS。

2. AngularJS实现 #

AngularJS有两种常见实现方式，可根据场景选择：

方式一：结合表单验证（更规范） #

<div ng-app="saveApp" ng-controller="SaveCtrl">
  <form name="saveForm" ng-submit="handleSave()">
    <input type="text" ng-model="inputContent" name="contentField" required>
    <button type="submit">保存</button>
  </form>
</div>

<script src="angular.min.js"></script>
<script>
angular.module('saveApp', [])
.controller('SaveCtrl', function($scope) {
  $scope.handleSave = function() {
    // 检查输入字段是否无效（添加required后，空值会触发invalid状态）
    if ($scope.saveForm.contentField.$invalid) {
      alert('输入框不能为空！');
      return;
    }
    // 输入有效时执行保存逻辑
  };
});
</script>

方式二：直接在点击事件判断（更灵活） #

如果不用表单，直接给按钮绑定点击事件：

<div ng-app="saveApp" ng-controller="SaveCtrl">
  <input type="text" ng-model="inputContent" placeholder="请输入内容">
  <button ng-click="handleSave()">保存</button>
</div>

<script src="angular.min.js"></script>
<script>
angular.module('saveApp', [])
.controller('SaveCtrl', function($scope) {
  $scope.handleSave = function() {
    // 直接判断输入值是否为空（去掉首尾空格）
    if (!$scope.inputContent || !$scope.inputContent.trim()) {
      alert('输入框不能为空！');
      return;
    }
    // 执行保存操作
  };
});
</script>

3. 现代Angular（Angular 2+）实现 #

现代Angular推荐用表单模块处理验证，这里给出模板驱动表单的示例（上手简单）：

步骤1：导入FormsModule #

在模块文件（比如app.module.ts）中导入表单模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], // 添加到imports数组
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤2：组件模板与逻辑 #

<!-- app.component.html -->
<form #saveForm="ngForm" (ngSubmit)="onSave(saveForm)">
  <input 
    type="text" 
    name="contentField" 
    [(ngModel)]="inputContent" 
    #contentField="ngModel" 
    required
    placeholder="请输入内容"
  >
  <button type="submit">保存</button>
</form>

// app.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  inputContent: string = '';

  onSave(form: NgForm) {
    // 检查表单是否无效，也可以单独检查字段：contentField.invalid
    if (form.invalid) {
      alert('输入框不能为空！');
      return;
    }
    // 表单有效时执行保存逻辑
  }
}

内容的提问来源于stack exchange，提问作者Jyoti