在网页开发中,表单是用户与网站交互的重要方式。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表单输入验证和动态交互。在实际开发中,可以根据具体需求进行调整和优化。祝你编程愉快!
