关键词

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

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

本文链接:http://task.lmcjl.com/news/11556.html

展开阅读全文