正文

轻松掌握JS表单输入技巧，轻松实现数据验证与动态交互

/0 浏览量
0520

在网页开发中，表单是用户与网站交互的重要方式。JavaScript（JS）为表单数据的验证和动态交互提供了强大的功能。本文将带你轻松掌握JS表单输入技巧，帮助你实现高效的数据验证和动态交互。

一、基础验证

1. 输入类型验证

HTML5提供了多种内置的输入类型，如email、number、date等，但有时候我们需要更严格的验证。使用JavaScript可以轻松实现。

function validateEmail(email) {
  var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  return re.test(email);
}

function validateNumber(number) {
  return !isNaN(parseFloat(number)) && isFinite(number);
}

2. 长度验证

限制用户输入的字符长度也是一个常见的需求。

function validateLength(input, minLength, maxLength) {
  return input.length >= minLength && input.length <= maxLength;
}

二、实时验证

实时验证可以在用户输入过程中即时给出反馈，提高用户体验。

1. 使用input事件

document.getElementById('email').addEventListener('input', function(event) {
  if (validateEmail(event.target.value)) {
    event.target.style.borderColor = 'green';
  } else {
    event.target.style.borderColor = 'red';
  }
});

2. 使用change事件

document.getElementById('username').addEventListener('change', function(event) {
  if (validateLength(event.target.value, 3, 10)) {
    event.target.style.borderColor = 'green';
  } else {
    event.target.style.borderColor = 'red';
  }
});

三、动态交互

1. 提示信息

function showMessage(input, message) {
  var el = input.nextElementSibling;
  el.textContent = message;
}

document.getElementById('password').addEventListener('input', function(event) {
  if (validateLength(event.target.value, 6, 16)) {
    event.target.style.borderColor = 'green';
    showMessage(event.target, '密码强度：强');
  } else {
    event.target.style.borderColor = 'red';
    showMessage(event.target, '密码强度：弱');
  }
});

2. 自动完成

function autocomplete(input, array) {
  var current = 0;
  var suggestions = [];

  function fillSuggestion() {
    suggestions = [];
    for (var i = 0; i < array.length; i++) {
      if (array[i].substr(0, input.value.length).toUpperCase() === input.value.toUpperCase()) {
        suggestions.push(array[i]);
      }
    }
  }

  function highlight() {
    if (suggestions.length) {
      for (var i = 0; i < suggestions.length; i++) {
        if (i === current) {
          input.style.borderColor = 'green';
        } else {
          input.style.borderColor = '';
        }
      }
    }
  }

  function showSuggestion() {
    fillSuggestion();
    highlight();
    var s = document.createElement('div');
    s.setAttribute('id', 'autocomplete-list');
    s.setAttribute('class', 'autocomplete-items');
    for (var i = 0; i < suggestions.length; i++) {
      var div = document.createElement('div');
      div.innerHTML = `<strong>${suggestions[i].substr(0, input.value.length)}</strong>${suggestions[i].substr(input.value.length)}`;
      div.innerHTML += `<input type="hidden" value="${suggestions[i]}">`;
      div.addEventListener('click', function(event) {
        input.value = event.target.textContent;
        document.getElementById('autocomplete-list').remove();
      });
      s.appendChild(div);
    }
    document.body.appendChild(s);
  }

  input.addEventListener('input', function(event) {
    if (input.value.length) {
      showSuggestion();
    } else {
      document.body.removeChild(document.getElementById('autocomplete-list'));
    }
  });

  input.addEventListener('keydown', function(event) {
    if (event.keyCode === 40 && suggestions.length) {
      current++;
      highlight();
    } else if (event.keyCode === 38 && current) {
      current--;
      highlight();
    } else if (event.keyCode === 13) {
      input.value = suggestions[current];
      document.body.removeChild(document.getElementById('autocomplete-list'));
    }
  });
}

autocomplete(document.getElementById('search'), ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape']);

通过以上技巧，你可以轻松实现JS表单输入验证和动态交互。在实际开发中，可以根据具体需求进行调整和优化。祝你编程愉快！

-- 展开阅读全文 --