如何用Angular1/JavaScript实现多文本框提交按钮启用校验

方案1：AngularJS (Angular 1) 实现 #

首先得把输入框和AngularJS的ng-model绑定起来，这样框架才能实时追踪输入变化，然后在ng-disabled里判断三个输入框的值是否全部为空（要记得去除首尾空格，避免用户只输入空格的情况）。

修改后的完整代码如下：

<div ng-app="myApp" ng-controller="myCtrl">
  First name: <br> 
  <input type="text" id="textsend1" name="firstname1" ng-model="formData.name1" value="Mickey"> <br> 
  Last name:<br> 
  <input type="text" id="textsend2" name="lastname" ng-model="formData.name2" value="Mouse"> <br> <br> 
  <input type="text" id="textsend3" name="firstname" ng-model="formData.name3" value="Mickey"> <br> <br> 
  <input type="submit" value="Submit" ng-disabled="!(formData.name1.trim() || formData.name2.trim() || formData.name3.trim())">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // 初始化模型值，和输入框默认值对应
  $scope.formData = {
    name1: "Mickey",
    name2: "Mouse",
    name3: "Mickey"
  };
});
</script>

逻辑说明：

• ng-model把每个输入框的值绑定到控制器的formData对象，让AngularJS能实时感知输入变化。
• ng-disabled里的表达式!(formData.name1.trim() || formData.name2.trim() || formData.name3.trim())：
  • 先判断三个输入框去除首尾空格后是否有任意一个非空（用||逻辑或）。
  • 用!取反后，当全部输入框都为空时，ng-disabled为true，按钮禁用；只要有一个输入框有内容，按钮就会启用。

方案2：原生JavaScript 实现 #

如果不用AngularJS，直接用原生JS监听输入框的input事件，每次输入时检查三个输入框的内容，动态设置按钮的disabled属性就行。

修改后的完整代码：

First name: <br> 
<input type="text" id="textsend1" name="firstname1" value="Mickey"> <br> 
Last name:<br> 
<input type="text" id="textsend2" name="lastname" value="Mouse"> <br> <br> 
<input type="text" id="textsend3" name="firstname" value="Mickey"> <br> <br> 
<input type="submit" id="submitBtn" value="Submit" disabled>

<script>
// 获取需要操作的元素
const inputs = document.querySelectorAll('#textsend1, #textsend2, #textsend3');
const submitBtn = document.getElementById('submitBtn');

// 定义检查输入框的函数
function checkInputs() {
  // 判断是否有任意一个输入框去除空格后非空
  const hasContent = Array.from(inputs).some(input => input.value.trim() !== '');
  // 反向设置按钮的禁用状态
  submitBtn.disabled = !hasContent;
}

// 页面加载时先执行一次，确保初始状态正确
checkInputs();

// 给每个输入框绑定输入事件，实时检查
inputs.forEach(input => {
  input.addEventListener('input', checkInputs);
});
</script>

逻辑说明：

• checkInputs函数通过Array.from(inputs).some(...)快速判断是否存在非空的输入框。
• 页面加载时调用checkInputs，保证输入框有默认值时按钮是启用状态。
• 每个输入框绑定input事件，用户输入或删除内容时都会触发检查，动态更新按钮状态。

内容的提问来源于stack exchange，提问作者Manoj K Naidu