js input自定义校验

在JS中，我们可以通过自定义校验函数对input元素进行校验。首先，我们需要选取需要校验的input元素，可以通过id、class或其他属性来选取。例如，如果我们要对一个输入框进行校验，可以使用类似下面的代码：

let inputElement = document.getElementById('inputId');

接下来，我们可以为该input元素添加一个事件监听器，监听input事件的触发。这样，每当输入框的内容发生变化时，我们的校验函数就会被调用。在校验函数中，我们可以使用正则表达式或其他逻辑来判断输入是否符合要求。例如，我们可以使用正则表达式来校验输入是否为一个有效的手机号码：

inputElement.addEventListener('input', function() {
  let inputValue = inputElement.value;
  let phoneRegex = /^1[3456789]\d{9}$/;
  if (phoneRegex.test(inputValue)) {
    // 输入符合要求
    inputElement.classList.remove('invalid');
    inputElement.classList.add('valid');
  } else {
    // 输入不符合要求
    inputElement.classList.remove('valid');
    inputElement.classList.add('invalid');
  }
});

在上面的代码中，我们使用test()方法来检测输入的值是否与手机号码的正则表达式匹配。如果匹配成功，则将输入框的样式设置为valid，否则设置为invalid。

这只是一个简单的示例，实际应用中，我们可以根据需要编写更复杂的校验逻辑。同时，我们还可以在校验函数中添加提示信息、错误处理等内容，以提升用户体验。