js实现表单校验功能

当我们进行前端开发时，表单校验是必不可少的功能。下面是一些基本的步骤和示例，可以帮助你实现基本的表单校验功能。

步骤

1. 选择需要校验的表单
   如果你的表单不止一个，可以给每个表单添加id属性，便于区分。

2. 给表单绑定submit事件
   我们需要在表单提交的时候进行校验，避免用户输入不合法的信息。

$('#form').submit(function(e) {
    // 表单提交时的校验逻辑
});

1. 阻止默认的表单提交事件
   如果用户输入不合法的信息，我们需要阻止表单的默认提交事件，并给出提示。

$('#form').submit(function(e) {
    // 阻止默认提交事件
    e.preventDefault();

    // 表单提交时的校验逻辑
});

1. 编写校验逻辑
   根据表单的不同需求，编写相应的校验逻辑，可以使用if语句或者switch语句。校验逻辑中可以包含多种不同类型的校验，如非空校验、邮箱格式校验、长度校验等。

$('#form').submit(function(e) {
    // 阻止默认提交事件
    e.preventDefault();

    // 校验逻辑

    // 非空校验
    if ($('#username').val() === '') {
        alert('用户名不能为空！');
        return false;
    }

    // 邮箱格式校验
    let emailReg = /^([\w_-])+@([\w_-])+\.([\w_-])+$/;
    if ($('#email').val() === '' || !emailReg.test($('#email').val())) {
        alert('邮箱格式不正确！');
        return false;
    }

    // 长度校验
    if ($('#password').val().length < 6) {
        alert('密码长度不能少于6位！');
        return false;
    }

    // 如果校验都通过了，提交表单
    // $(this).unbind('submit').submit();
});

1. 提交表单
   当所有的校验都通过了，我们可以使用jQuery的unbind()方法和submit()方法提交表单。

$('#form').submit(function(e) {
    // 阻止默认提交事件
    e.preventDefault();

    // 校验逻辑

    // 如果校验都通过了，提交表单
    $(this).unbind('submit').submit();
});

示例说明

示例1：非空校验

$('#form').submit(function(e) {
    // 阻止默认提交事件
    e.preventDefault();

    // 非空校验
    if ($('#username').val() === '') {
        alert('用户名不能为空！');
        return false;
    }

    // 如果校验都通过了，提交表单
    $(this).unbind('submit').submit();
});

该校验逻辑用于校验用户名是否为空，如果为空则给出提示并阻止表单提交。

示例2：长度校验

$('#form').submit(function(e) {
    // 阻止默认提交事件
    e.preventDefault();

    // 长度校验
    if ($('#password').val().length < 6) {
        alert('密码长度不能少于6位！');
        return false;
    }

    // 如果校验都通过了，提交表单
    $(this).unbind('submit').submit();
});

该校验逻辑用于校验密码的长度，如果长度小于6位则给出提示并阻止表单提交。

以上是基本的表单校验功能的实现步骤和示例。根据实际的需求，可以编写相应的校验逻辑。