js 获取input的值|极客笔记

js 获取input的值

在web开发中，经常会需要获取用户在input框中输入的值，然后对这些值进行相应的处理。本文将详细介绍如何通过JavaScript来获取input框中的值，并给出一些实际应用的示例。

获取input的值方法

在JS中，我们可以通过多种方式来获取input框中的值。常用的方法有：

1. 通过id获取

通过给input框设置一个唯一的id，我们可以使用document.getElementById()方法来获取这个input框的值。示例代码如下：

<input type="text" id="myInput">
<button onclick="getValue()">获取值</button>

<script>
function getValue() {
  var inputVal = document.getElementById('myInput').value;
  console.log(inputVal);
}
</script>

上面的示例代码中，我们先定义了一个包含一个input框和一个按钮的html结构，然后通过document.getElementById('myInput')方法获取到这个input框的值。当点击按钮时，会调用getValue()函数，并将input框的值输出到console中。

2. 通过class获取

如果有多个input框需要获取值，我们可以给它们添加相同的class，然后使用document.getElementsByClassName()方法来获取这些input框的值。示例代码如下：

<input type="text" class="myInput">
<input type="text" class="myInput">
<button onclick="getValues()">获取值</button>

<script>
function getValues() {
  var inputs = document.getElementsByClassName('myInput');
  for (var i = 0; i < inputs.length; i++) {
    console.log(inputs[i].value);
  }
}
</script>

上面的示例代码中，我们先定义了包含两个input框和一个按钮的html结构，然后通过document.getElementsByClassName('myInput')方法获取所有class为myInput的input框的值，并逐个输出到console中。

3. 通过标签名获取

如果希望获取页面中所有的input框的值，可以使用document.getElementsByTagName()方法来获取。示例代码如下：

<input type="text">
<input type="text">
<button onclick="getAllValues()">获取值</button>

<script>
function getAllValues() {
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
    console.log(inputs[i].value);
  }
}
</script>

上面的示例代码中，我们定义了包含两个input框和一个按钮的html结构，然后通过document.getElementsByTagName('input')方法获取所有的input框的值，并逐个输出到console中。

实际应用示例

接下来，我们通过一个实际的应用场景来演示如何获取input框的值。假设我们有一个表单，需要用户输入用户名和密码，然后点击登录按钮。我们可以通过JavaScript来获取input框中的值，并进行相应的处理。示例代码如下：

<form id="loginForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button onclick="login()">登录</button>
</form>

<script>
function login() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;

  if (username === 'admin' && password === '123456') {
    alert('登录成功！');
  } else {
    alert('用户名或密码错误，请重试！');
  }
}
</script>

上面的示例代码中，我们定义了一个表单，包含输入用户名和密码的input框以及一个登录按钮。当点击登录按钮时，会调用login()函数，该函数会获取input框中的用户名和密码的值，并进行判断。如果用户名和密码都满足条件，则弹出登录成功的提示框，否则弹出错误提示框。