输入入框进行校验 前端

输入框校验是指在用户输入数据时，前端对数据进行格式、长度、类型等方面的检查，以确保数据的合法性和正确性。下面是一个简单的前端输入框校验的示例代码：

HTML代码：

<label for="inputUsername">用户名：</label>
<input type="text" id="inputUsername" name="username">
<span id="errorUsername"></span>
<br>
<label for="inputPassword">密码：</label>
<input type="password" id="inputPassword" name="password">
<span id="errorPassword"></span>
<br>
<button id="submitBtn">提交</button>

JavaScript代码：

// 获取表单元素
const inputUsername = document.getElementById('inputUsername');
const inputPassword = document.getElementById('inputPassword');
const submitBtn = document.getElementById('submitBtn');
const errorUsername = document.getElementById('errorUsername');
const errorPassword = document.getElementById('errorPassword');

// 定义校验规则
const usernamePattern = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; // 用户名：字母开头，允许字母数字下划线，长度为5-16位
const passwordPattern = /^[a-zA-Z]\w{5,17}$/; // 密码：字母开头，允许字母数字下划线，长度为6-18位

// 添加事件监听器
submitBtn.addEventListener('click', function() {
  // 校验用户名
  if (!usernamePattern.test(inputUsername.value)) {
    errorUsername.innerText = '用户名格式不正确';
    return;
  }
  errorUsername.innerText = '';
  
  // 校验密码
  if (!passwordPattern.test(inputPassword.value)) {
    errorPassword.innerText = '密码格式不正确';
    return;
  }
  errorPassword.innerText = '';
  
  // 表单提交
  // ...
});

在上面的代码中，我们首先获取了用户名输入框、密码输入框、提交按钮和错误提示元素。然后，定义了用户名和密码的校验规则，并在提交按钮上添加了点击事件监听器。在事件处理函数中，依次对用户名和密码进行校验，如果不符合规则，则在相应的错误提示元素中显示错误信息，并终止表单提交。如果校验通过，则清空错误提示信息，继续进行表单提交。