javascript 常用表单校验

原创

mob64ca12f6aae1 2024-04-16 05:18:24 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f6aae1的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 常用表单校验详解

一、流程概述

首先，让我们来看一下实现 JavaScript 常用表单校验的整个流程，我们可以使用一个表格来展示步骤：

步骤	内容
1	获取表单元素
2	监听表单提交事件
3	校验表单数据
4	显示错误提示信息

接下来，我们将详细说明每一个步骤所需的操作和代码。

二、具体步骤

1. 获取表单元素

首先，我们需要获取要校验的表单元素。在 HTML 中，我们可以使用 document.getElementById 方法来获取表单元素，代码如下：

// 获取表单元素
const form = document.getElementById('formId');

2. 监听表单提交事件

接下来，我们需要监听表单提交事件，以便在用户点击提交按钮时触发表单校验。我们可以使用 addEventListener 方法来监听表单的 submit 事件，代码如下：

// 监听表单提交事件
form.addEventListener('submit', function(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
    // 调用校验表单数据函数
    validateForm();
});

3. 校验表单数据

在校验表单数据的过程中，我们需要检查每个表单元素的值是否符合我们的要求。我们可以编写一个 validateForm 函数来进行校验，代码如下：

// 校验表单数据
function validateForm() {
    // 获取表单输入值
    const name = document.getElementById('name').value;
    
    // 检查名字是否为空
    if (name === '') {
        showError('name', '名字不能为空');
    }
    // 在这里可以继续添加其他校验规则
}

4. 显示错误提示信息

最后，如果有错误发生，我们需要在页面上显示错误提示信息。我们可以编写一个 showError 函数来显示错误信息，代码如下：

// 显示错误提示信息
function showError(inputId, errorMessage) {
    // 获取要显示错误信息的元素
    const errorElement = document.getElementById(inputId + '-error');
    // 设置错误信息内容
    errorElement.innerText = errorMessage;
}