JS验证input输入框（字母，数字，符号，中文）

这里给出JS验证输入框的完整攻略。我们需要以下步骤来完成验证：

1. 获取输入框元素
2. 给输入框元素绑定事件监听器，以便在输入内容时能够及时验证
3. 在事件监听器的回调函数中，通过正则表达式对输入内容进行验证
4. 根据验证结果，决定是否将输入内容存储到变量或者进行其他操作

下面我们详细分析每个步骤，以及提供两个示例。

步骤1：获取输入框元素

我们可以使用 document.querySelector() 或者 document.getElementById() 等方法来获取输入框元素。这里以 document.querySelector() 为例：

const input = document.querySelector('#input-id');

步骤2：绑定事件监听器

在这个例子中，我们需要监听 input 事件（对于输入框元素，只要用户输入内容就会触发该事件），代码如下：

input.addEventListener('input', function(e) {
  console.log(e.target.value);
})

步骤3：验证输入内容

我们可以使用正则表达式来验证输入内容。这里提供几个常见的验证正则表达式：

• 只能输入字母：/^[a-zA-Z]+$/
• 只能输入数字：/^\d+$/
• 只能输入符号：/^[~!@#$%^&*()_+-={}[]|\\:;"'<>,.?/]+$/
• 只能输入中文：/^[\u4E00-\u9FA5]+$/

以验证输入字母为例：

const pattern = /^[a-zA-Z]+$/;
if (pattern.test(e.target.value)) {
  // 验证通过
} else {
  // 验证不通过
}

步骤4：根据验证结果做出相应操作

可以将验证结果存储到变量中：

let isValid = false;
const pattern = /^[a-zA-Z]+$/;
if (pattern.test(e.target.value)) {
  isValid = true;
} else {
  isValid = false;
}

也可以根据验证结果进行其他操作，比如给输入框添加提示信息：

const pattern = /^[a-zA-Z]+$/;
if (pattern.test(e.target.value)) {
  input.setCustomValidity(''); // 验证通过，清空提示信息
} else {
  input.setCustomValidity('只能输入字母'); // 验证不通过，设置提示信息
}

下面提供两个验证示例，一个验证输入数字和字母，一个验证输入中文和符号：

// 验证输入数字和字母
const input = document.querySelector('#input-id1');
input.addEventListener('input', function(e) {
  let isValid = false;
  const pattern = /^[a-zA-Z0-9]+$/;
  if (pattern.test(e.target.value)) {
    isValid = true;
  } else {
    isValid = false;
  }
})

// 验证输入中文和符号
const input = document.querySelector('#input-id2');
input.addEventListener('input', function(e) {
  const pattern = /^[\u4E00-\u9FA5~!@#$%^&*()_+-={}[\]|\\:;"'<>,.?/]+$/;
  if (pattern.test(e.target.value)) {
    input.setCustomValidity(''); // 验证通过，清空提示信息
  } else {
    input.setCustomValidity('只能输入中文和符号'); // 验证不通过，设置提示信息
  }
})

以上就是JS验证输入框（字母，数字，符号，中文）的完整攻略。