背景介绍

随着前端应用的广泛发展，表单验证的重要性日益凸显。通过验证用户名和密码，不仅能够提升用户体验，还能有效减少潜在的安全风险。本项目实现了一个基于JavaScript的前端表单验证器，验证用户输入的用户名和密码是否符合特定规则，并通过DOM操作验证输入字段，最终返回验证结果。

思路分析

用户名验证规则

• 长度要求：用户名需为3-10位字符。
• 字符类型：用户名仅允许字母（大写/小写）、数字及特殊字符。

密码验证规则

• 字符类型要求：密码需包含至少一个字母、数字和特殊字符。
• 正则表达式匹配：密码需符合^[A-Z][0-9][!@#$%^&*]+$。

通过正则表达式对用户名和密码分别验证，可以确保输入字段的合法性。验证结果将根据规则返回”符合”或”不符合”的提示。

代码实现

// JavaScript前端表单验证器实现

// 验证用户名
function validateUsername(input) {
    const regex = /[A-Za-z]{3,10}/;
    return regex.test(input) ? "用户名符合规则" : "用户名长度不符合要求";
}

// 验证密码
function validatePassword(input) {
    const regex = /[A-Z][0-9][!@#$%^&*]+/; // 匹配字母、数字和特殊字符
    return regex.test(input) ? "密码符合规则" : "密码包含字母、数字和特殊字符不满足";
}

// 验证并返回结果
function validateForm() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    const resultUsername = validateUsername(username);
    const resultPassword = validatePassword(password);

    return `用户名：${resultUsername}\n密码：${resultPassword}`;
}

// 示例输入
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');

// 初始化验证
usernameInput.addEventListener('input', validateForm);
passwordInput.addEventListener('input', validateForm);

// 输出结果
document.getElementById('output').textContent = validateForm();

总结

本项目实现了基于JavaScript的前端表单验证验证器，验证规则包括用户名长度3-10位和密码包含字母、数字和特殊字符。通过DOM操作验证输入字段，并返回验证结果，有效提升用户体验和安全性。验证过程结合了正则表达式验证，确保输入字段符合预期规则，适用于前端表单验证场景。