这里给出JS验证输入框的完整攻略。我们需要以下步骤来完成验证：
下面我们详细分析每个步骤，以及提供两个示例。
我们可以使用 document.querySelector() 或者 document.getElementById() 等方法来获取输入框元素。这里以 document.querySelector() 为例：
const input = document.querySelector('#input-id');
在这个例子中，我们需要监听 input 事件（对于输入框元素，只要用户输入内容就会触发该事件），代码如下：
input.addEventListener('input', function(e) {
console.log(e.target.value);
})
我们可以使用正则表达式来验证输入内容。这里提供几个常见的验证正则表达式：
/^[a-zA-Z]+$//^\d+$//^[~!@#$%^&*()_+-={}[]|\\:;"'<>,.?/]+$//^[\u4E00-\u9FA5]+$/以验证输入字母为例：
const pattern = /^[a-zA-Z]+$/;
if (pattern.test(e.target.value)) {
// 验证通过
} else {
// 验证不通过
}
可以将验证结果存储到变量中：
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验证输入框（字母，数字，符号，中文）的完整攻略。
本文链接：http://task.lmcjl.com/news/8913.html