JavaScript 表单验证

在 web 开发中，表单验证是非常重要的一部分。通过 JavaScript，我们可以在客户端对用户输入的数据进行验证，避免不合法的数据提交到服务器端。

常见的表单验证方式

1. 必填字段验证

对于必填字段，我们可以通过判断输入框的值是否为空来进行验证。如果为空，则提示用户必须填写该字段。

示例代码：

function validateForm() {
    var name = document.getElementById('name').value;

    if (name == '') {
        alert('姓名不能为空');
        return false;
    }
}

2. 邮箱格式验证

对于邮箱输入框，我们可以通过正则表达式来验证输入的邮箱格式是否正确。

示例代码：

-- -------------------- ---- -------
-------- --------------- -
    --- ----- - ---------------------------------------
    --- ------------ - ---------------------------------------------------

    -- ---------------------------- -
        --------------------
        ------ ------
    -
-

3. 密码强度验证

对于密码输入框，我们可以通过判断密码的长度和字符类型来进行验证。

示例代码：

function validatePassword() {
    var password = document.getElementById('password').value;

    if (password.length < 8 || !/[a-zA-Z]/.test(password) || !/[0-9]/.test(password)) {
        alert('密码必须包含至少8个字符，包括字母和数字');
        return false;
    }
}

自定义验证规则

除了常见的表单验证方式外，我们还可以根据具体需求定制自己的验证规则。

示例代码：

function customValidation() {
    var input = document.getElementById('custom').value;

    if (input != 'custom') {
        alert('请输入正确的自定义内容');
        return false;
    }
}

在实际开发中，我们可以结合多种验证方式，为表单添加全面的验证功能，提高用户体验和数据合法性。