当编写一个表单的时候,为了保证提交的数据正确性以及安全性,我们需要对用户输入的数据进行验证。而 JavaScript 可以提供灵活的表单验证功能,使得表单数据的验证更加方便和高效。
以下是一个可用于表单验证的基本攻略:
通过使用 JavaScript的 DOM 操作获取表单元素对象,以便于后续的获取用户输入和验证数据。
示例:
let inputElement = document.getElementById('input1');
为表单元素添加事件监听器,以便于在表单元素发生改变时触发验证功能。
示例:
inputElement.addEventListener('change', function() {
// 在此处添加表单验证功能
});
编写具体的表单验证代码,包括合法性检查函数和错误提示函数,来检查用户输入的数据是否合法。在检查过程中,如果表单数据不合法,需要及时给用户提供错误提示信息。
示例:
function checkInput() {
let inputText = inputElement.value;
if (inputText.length < 6) {
alert('输入的内容不能少于6位');
return false;
}
// 检查是否输入了非法字符,例如<>/
let illegalCharReg = /[<>\/]/;
if (illegalCharReg.test(inputText)) {
alert('不能输入非法字符');
return false;
}
return true;
}
在事件监听器中调用验证功能,即在用户输入改变时触发表单数据的验证,并根据验证结果来决定是否允许提交表单数据。
示例:
inputElement.addEventListener('change', function() {
if (checkInput()) {
// 数据合法,可以提交表单
}
});
以上是针对表单验证的基本攻略,通过这个方法,我们可以很轻松地实现表单数据的验证功能。
另外,为了更好地展示表单验证的过程,这里提供一个具体的案例,以便更好地帮助理解。
案例1:实现一个用户名验证功能
要求:
示例:
HTML代码:
<input type="text" id="username">
JavaScript代码:
let usernameElement = document.getElementById('username');
function checkUsername() {
let username = usernameElement.value;
if (username.length < 6) {
alert('用户名长度不能少于6个字符');
return false;
}
let illegalCharReg = /[^a-zA-Z0-9]/;
if(illegalCharReg.test(username)) {
alert('用户名只能包含字母和数字字符');
return false;
}
return true;
}
usernameElement.addEventListener('change', function() {
checkUsername();
});
在事件监听器中调用了 checkUsername()
函数,该函数用来验证用户输入的用户名是否符合规范。如果输入不符合要求,就会弹出提示框进行提醒。
案例2:实现一个密码验证功能
要求:
示例:
HTML代码:
<input type="password" id="password">
<div id="passwordStrength"></div>
JavaScript代码:
let passwordElement = document.getElementById('password');
let passwordStrengthElement = document.getElementById('passwordStrength');
function checkPassword() {
let password = passwordElement.value;
if (password.length < 6) {
alert('密码长度不能少于6个字符');
return false;
}
let level = 0;
let numberReg = /\d+/;
let upperCaseReg = /[A-Z]/;
let lowerCaseReg = /[a-z]/;
if (numberReg.test(password)) {
level++;
}
if (upperCaseReg.test(password)) {
level++;
}
if (lowerCaseReg.test(password)) {
level++;
}
switch (level) {
case 0:
passwordStrengthElement.innerHTML = '密码等级:较弱';
break;
case 1:
passwordStrengthElement.innerHTML = '密码等级:一般';
break;
case 2:
passwordStrengthElement.innerHTML = '密码等级:较好';
break;
case 3:
passwordStrengthElement.innerHTML = '密码等级:非常好';
break;
default:
passwordStrengthElement.innerHTML = '密码等级:未知';
break;
}
return true;
}
passwordElement.addEventListener('change', function() {
checkPassword();
});
在此示例中,密码等级输入框反馈了密码输入的强弱程度,并可自由根据业务设置等级和一些提醒性文本。
本文链接:http://task.lmcjl.com/news/11556.html