JavaScript实现简单表单验证案例

当编写一个表单的时候，为了保证提交的数据正确性以及安全性，我们需要对用户输入的数据进行验证。而 JavaScript 可以提供灵活的表单验证功能，使得表单数据的验证更加方便和高效。

以下是一个可用于表单验证的基本攻略：

1. 获取表单元素对象

通过使用 JavaScript的 DOM 操作获取表单元素对象，以便于后续的获取用户输入和验证数据。

示例：

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

1. 添加事件监听器

为表单元素添加事件监听器，以便于在表单元素发生改变时触发验证功能。

示例：

inputElement.addEventListener('change', function() {
    // 在此处添加表单验证功能
});

1. 编写表单验证功能

编写具体的表单验证代码，包括合法性检查函数和错误提示函数，来检查用户输入的数据是否合法。在检查过程中，如果表单数据不合法，需要及时给用户提供错误提示信息。

示例：

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;
}

1. 在事件监听器中调用验证功能

在事件监听器中调用验证功能，即在用户输入改变时触发表单数据的验证，并根据验证结果来决定是否允许提交表单数据。

示例：

inputElement.addEventListener('change', function() {
    if (checkInput()) {
        // 数据合法，可以提交表单
    }
});

以上是针对表单验证的基本攻略，通过这个方法，我们可以很轻松地实现表单数据的验证功能。

另外，为了更好地展示表单验证的过程，这里提供一个具体的案例，以便更好地帮助理解。

案例1：实现一个用户名验证功能

要求：

• 用户名的长度不能少于6个字符
• 用户名只能包含字母和数字字符

示例：

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：实现一个密码验证功能

要求：

• 密码的长度不能少于6个字符
• 提示密码等级，要求密码中包含数字，大写英文字母和小写英文字母

示例：

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();
});

在此示例中，密码等级输入框反馈了密码输入的强弱程度，并可自由根据业务设置等级和一些提醒性文本。