JavaScript验证-DEV365 开发者社区

我们都一次注册/登录到一个站点。另外，可能我们所有人都无意间留下了空白，甚至提供了错误的数据输入，从而导致错误登录甚至注册。这是因为该字段已验证。数据验证是根据预设规则，格式甚至约束的正确性，准确性，验证或检查提供的数据。这样可以确保未损害或损坏系统的数据。 JavaScript提供了一种方法，我们可以在数据从客户端移动到Web服务器时验证数据。

先决条件：对HTML，CSS和JavaScript的基本理解
目标：了解良好的JavaScript验证

表单验证

表单验证是确保用户向Web表单提供的数据符合设定标准之前的过程，然后提交给服务器以进行处理。

表单验证的类型

客户端表单验证 - 客户端表单验证在用户的浏览器中使用HTML，JavaScript和有时HTML5属性发生。它在用户填写表格时向用户提供实时反馈。此验证是用户友好的，可减少不必要的服务器请求的数量。这就是我们今天正在寻找的。
服务器端形式验证 - 提交数据后，在服务器上执行服务器端形式验证。它是安全网，以确保仅处理有效的数据。服务器端验证对于保持数据一致性和安全性至关重要，因为可以绕过客户端验证。

服务器端形式验证

这种验证发生在服务器端，在此通过网页上的表单提交后，用户输入数据进行处理。服务器端验证对于维持数据完整性，安全性和一致性至关重要，无论是否已实施客户端验证。虽然客户端验证迅速告诉用户他们的输入是否正确，并有助于避免不必要的服务器旅行，但可以操纵它。另一方面，服务器端验证可以确保只有正确和真实的数据可以说是进入网站的后端。这就像在网站的一边有一个守门人来仔细检查用户提交的所有内容一样。在服务器端验证中常用的语言是PHP，Ruby，Python和Java。

客户端验证

使用JavaScript和其他脚本语言完成，客户端验证是一个过程，该过程验证浏览器上的用户输入在此数据提交到服务器之前。立即向用户提供有关输入状态的用户，尤其是在数据输入错误的情况下。

客户端验证的类型

a。正则表达式
尽管无法像JavaScript那样定制，但是正则表达式（REGEX）是定义字符串模式并记录更好性能的强大工具。他们经常被用来验证各种用户输入，包括密码，电子邮件和电话号码。 REGEX提供了一种明确且适应性的方法来强制输入数据的特定表格或约束。

示例：电子邮件验证

const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (emailPattern.test(userInput)) {
    // Valid email format
} else {
    // Invalid email format
}

b。 HTML5形式验证
使用HTLM5属性，我们可以执行验证而无需JavaScript。这利用内置属性来强制执行模式匹配，最小值/最大值和所需值等规则。一些关键属性包括：

必需：指定在提交之前必须填写字段。
类型：定义预期输入类型（例如，电子邮件，号码，日期）。
模式：指定输入验证的正则表达模式。

示例：使用HTML5属性

<input type="email" name="userEmail" required pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}">
<input type="number" name="userAge" min="18" max="99">

c。 JavaScript验证
JavaScript验证允许开发人员创建自定义的JS函数，可用于根据各种要求来验证用户输入。在整个验证过程中，这使开发人员在控制和灵活性方面具有优势。

示例：密码强度检查

function isStrongPassword(password) {
    // Custom validation logic to check password strength
}

入门

打开您的编辑器（我使用VS代码），创建一个文件夹并将其命名任何名称（让我们调用验证验证）
创建三个文件：index.html，index.css and style.css

应该看起来像这样：

Validation/
├── index.html
├── index.js
└── style.css

现在我们将为航空公司预订系统创建注册表格。

创建预订表格
index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Airliner Reservation Form</title>
</head>
<body>
    <div class="container">
        <h1>Reservations</h1>
        <form id="reservationForm">
            <label for="firstName">First Name:</label>
            <input type="text" id="firstName" name="firstName">

            <label for="lastName">Last Name:</label>
            <input type="text" id="lastName" name="lastName">

            <label for="email">Email:</label>
            <input type="email" id="email" name="email">

            <label for="reservationDate">Reservation Date:</label>
            <input type="date" id="reservationDate" name="reservationDate">

            <label for="phoneNumber">Phone Number:</label>
            <input type="tel" id="phoneNumber" name="phoneNumber">

            <label for="numTravelers">Number of Travelers:</label>
            <input type="number" id="numTravelers" name="numTravelers">

            <button type="submit">Submit</button>
        </form>
    </div>
    <script src="index.js"></script>
</body>
</html>

这就是页面的外观：

样式
styles.css：

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('plane.jpg'); /*replace this with the correct path to your image */
    background-size: cover;
}

.container {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    margin: 50px auto;
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

h1 {
    text-align: center;
}

form {
    display: grid;
    gap: 7px;
}

label {
    font-weight: bold;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

这是样式后的外观：

验证
这里要注意的是，验证是在两个级别上完成的；针对空白字段（表单输入）和数据格式验证验证。未经任何验证，表格在不检查有效性的情况下提交数据。
首先，让我们在没有验证的情况下查看我们页面的行为：

对空白字段进行验证。

document.addEventListener('DOMContentLoaded', function() {
    const reservationForm = document.getElementById('reservationForm');

    reservationForm.addEventListener('submit', function(event) {
        // Prevent the form from submitting and refreshing the page
        event.preventDefault();

        // Get form inputs
        const firstName = document.getElementById('firstName').value;
        const lastName = document.getElementById('lastName').value;
        const email = document.getElementById('email').value;
        const reservationDate = document.getElementById('reservationDate').value;
        const phoneNumber = document.getElementById('phoneNumber').value;
        const numTravelers = document.getElementById('numTravelers').value;

        // Validate fields are not blank
        if (!firstName.trim()) {
            alert('Please enter your First Name.');
        } else if (!lastName.trim()) {
            alert('Please enter your Last Name.');
        } else if (!email.trim()) {
            alert('Please enter your Email.');
        } else if (!reservationDate.trim()) {
            alert('Please enter the Reservation Date.');
        } else if (!phoneNumber.trim()) {
            alert('Please enter your Phone Number.');
        } else if (!numTravelers.trim()) {
            alert('Please enter the Number of Travelers.');
        } else {
            // Move to the next section of validation
            performValidation(firstName, lastName, email, reservationDate, phoneNumber, numTravelers);
        }
    });
});

结果看起来像...

对正确的数据类型进行验证

function performValidation(firstName, lastName, email, reservationDate, phoneNumber, numTravelers) {
    const currentDate = new Date();
    const selectedDate = new Date(reservationDate);

    // Validate data types and conditions
    if (!/^[a-zA-Z]+$/.test(firstName)) {
        alert('First Name should contain only characters.');
    } else if (!/^[a-zA-Z]+$/.test(lastName)) {
        alert('Last Name should contain only characters.');
    } else if (!/^\d{10}$/.test(phoneNumber)) {
        alert('Please enter a valid 10-digit Phone Number.');
    } else if (selectedDate < currentDate.setHours(0, 0, 0, 0)) {
        alert('Reservation Date must be today or in the future.');
    } else {
        alert('Reservation submitted successfully!');
        // Here you can send the form data to the server or perform other actions.
    }
}

最终结果看起来像...

我们可以组合这两个文件并创建一个文件，index.js：

document.addEventListener('DOMContentLoaded', function() {
    const reservationForm = document.getElementById('reservationForm');

    reservationForm.addEventListener('submit', function(event) {
        // Prevent the form from submitting and refreshing the page
        event.preventDefault();

        // Get form inputs
        const firstName = document.getElementById('firstName').value;
        const lastName = document.getElementById('lastName').value;
        const email = document.getElementById('email').value;
        const reservationDate = document.getElementById('reservationDate').value;
        const phoneNumber = document.getElementById('phoneNumber').value;
        const numTravelers = document.getElementById('numTravelers').value;

        // Perform validation
        if (!firstName.trim()) {
            alert('Please enter your First Name.');
        } else if (!/^[a-zA-Z]+$/.test(firstName)) {
            alert('First Name should contain only characters.');
        } else if (!lastName.trim()) {
            alert('Please enter your Last Name.');
        } else if (!/^[a-zA-Z]+$/.test(lastName)) {
            alert('Last Name should contain only characters.');
        } else if (!email.trim()) {
            alert('Please enter your Email.');
        } else if (!reservationDate.trim()) {
            alert('Please enter the Travel Date.');
        } else {
            const currentDate = new Date();
            const selectedDate = new Date(reservationDate);

            // Allow the reservation to be made for today or a future date
            if (selectedDate < currentDate.setHours(0, 0, 0, 0)) {
                alert('Reservation Date must be today or in the future.');
            } else if (!phoneNumber.trim()) {
                alert('Please enter your Phone Number.');
            } else if (!/^\d{10}$/.test(phoneNumber)) {
                alert('Please enter a valid 10-digit Phone Number.');
            } else if (!numTravelers.trim()) {
                alert('Please enter the Number of Travelers.');
            } else {
                alert('Reservation submitted successfully!');
                // Here you can send the form data to the server or perform other actions.
            }
        }
    });
});

我觉得很少有问题在很大程度上被忽略，并且可能想涉及：

JavaScript表单验证中的实时反馈

实时反馈是一种强大的Web开发方法，可在用户与基于Web的表单互动时立即提供反馈。实时反馈将其写入或进行选择时的输入有效性告知用户，而不是等到提交表单以显示验证警报。该策略通过减少烦恼和错误来改善用户体验。在JavaScript表单验证的上下文中实现实时反馈需要动态查看用户的输入并根据需要更新界面。您可以按照以下步骤将实时反馈包括到表单验证过程中：

输入事件听众 - 将输入事件侦听器附加到表单字段（例如文本输入，挑选器等）。这些听众实时监视用户输入。
即时验证 - 用户类型或更改值，触发验证功能以检查输入的有效性。这可能涉及检查正确的数据类型，长度要求和其他条件。
更新UI元素 - 在输入字段附近更新用户界面元素（例如文本消息，图标或颜色更改），以提供立即反馈。例如，您可以显示有效输入的绿色选中标记和无效输入的红色警告符号。
有条件样式 - 根据其验证状态动态应用CSS类，以动态应用输入字段。这可以帮助用户快速确定有效和无效的输入。
有条件启用/禁用 - 如果您的按钮或操作取决于有效输入（例如“提交”按钮），请根据输入的有效性状态启用或禁用它们。

这是示例代码段，演示如何将实时反馈添加到表单输入：
a。 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Real-Time Feedback Example</title>
</head>
<body>
    <div class="container">
        <h1>Real-Time Feedback Example</h1>
        <form id="reservationForm">
            <label for="firstName">First Name:</label>
            <input type="text" id="firstName" name="firstName" class="input-field">

            <!-- Other form fields... -->

            <button type="submit">Submit</button>
        </form>
        <p class="feedback-message" id="firstNameFeedback"></p>
    </div>
    <script src="index.js"></script>
</body>
</html>

b。 style.css

/* Your CSS styling... */

.input-field.invalid {
    border: 1px solid red;
}

.feedback-message {
    color: red;
}

c。 index.js：

document.addEventListener('DOMContentLoaded', function() {
    const firstNameInput = document.getElementById('firstName');
    const firstNameFeedback = document.getElementById('firstNameFeedback');

    firstNameInput.addEventListener('input', function() {
        const inputValue = firstNameInput.value.trim();

        if (!inputValue) {
            firstNameInput.classList.add('invalid');
            firstNameFeedback.textContent = 'Please enter your First Name.';
        } else {
            firstNameInput.classList.remove('invalid');
            firstNameFeedback.textContent = '';
        }
    });
});

输出：

在此示例中，当用户以其名字键入名称时，输入的验证状态将实时更新。如果输入为空白，则显示视觉警告；否则，警告将删除。通过集成实时反馈，您的表单验证变得更加以用户为中心，帮助用户在发生时理解和纠正错误，从而有助于改善整体用户体验。

JavaScript形式验证的未来趋势：

Web组件 - Web组件提供了一种模块化和可重复使用的方式，可以将验证逻辑封装在自定义元素中。它们促进了代码可重复性和可维护性。
机器学习和AI-诸如机器学习和人工智能之类的高级技术可以通过预测用户输入模式，检测异常并提供更多的上下文感知反馈来增强形式验证。
智能验证库 - 新兴验证库提供高级功能，例如模糊验证（容忍次要输入错误），语义验证（理解上下文）和自动验证规则生成。
增强用户反馈 - 未来趋势涉及使用动画，交互式工具提示和视觉提示等丰富的UI元素来提供更直观和用户友好的验证反馈。
集成的衬里和编辑器 - 代码编辑器和IDE中的集成验证工具可以在开发过程中实时捕获错误，从而减少了使用验证问题部署表格的可能性。
可访问性 - 未来趋势强调残疾用户的无障碍验证反馈。提供有意义的错误消息，使用ARIA角色以及合并屏幕阅读器的兼容性将变得更加重要。

总结！
JavaScript验证的复杂性已在本文中深入研究，揭示了其在改善用户体验和数据完整性方面的不同功能。通过客户端验证，加速用户交互并减少不必要的服务器查询，可以通过客户端验证，加速用户响应。在保留数据完整性的同时，服务器端验证需要有效的客户端过程协调。实时反馈增加了动态的响应层，并使用户能够在发生输入错误时解决。深入的理解强调了精心设计的验证过程的价值，该过程确保了无缝的用户参与，严格的数据验证以及最终在技术驱动的环境中获得Web应用程序的成功。

快乐编码