js校验是怎么触发

JS校验是通过事件触发、手动调用、框架自动触发等方式实现的。其中，事件触发是最常见的方式，通常绑定在表单元素的相关事件上，比如onchange、onsubmit等。当用户在表单中输入数据并尝试提交时，校验函数会自动执行，确保数据的合法性和完整性。下面将详细介绍事件触发的方式。

事件触发是指在特定的用户操作或系统事件发生时，自动执行预定义的JavaScript校验函数。例如，当用户输入数据时，onchange事件会触发校验函数，检查输入的数据是否符合预期的格式或范围。这种方式可以在用户实时输入时提供即时反馈，提升用户体验。以下是几个常见的触发事件及其应用场景：

一、事件触发

1、Onchange事件

onchange事件在用户改变输入框内容时触发。它适用于需要即时校验的场景，例如表单中的文本输入框、选择框等。当用户输入数据并离开输入框时，校验函数会自动执行，检查数据的格式和内容是否正确。

<input type="text" id="username" onchange="validateUsername()">
<script>
    function validateUsername() {
        var username = document.getElementById('username').value;
        if (username.length < 5) {
            alert("Username must be at least 5 characters long.");
        }
    }
</script>

2、Onsubmit事件

onsubmit事件在用户提交表单时触发。它通常用于整体表单校验，在用户点击提交按钮时，校验表单中的所有字段，确保所有数据都符合要求。如果有任何字段不符合要求，可以阻止表单提交，并提示用户进行修改。

<form onsubmit="return validateForm()">
    <input type="text" id="email">
    <input type="submit" value="Submit">
</form>
<script>
    function validateForm() {
        var email = document.getElementById('email').value;
        if (!email.includes('@')) {
            alert("Please enter a valid email address.");
            return false;
        }
        return true;
    }
</script>

3、Onblur事件

onblur事件在用户离开输入框时触发。与onchange类似，它也适用于即时校验的场景，但onblur更侧重于失去焦点时的校验。当用户离开输入框时，校验函数会自动执行，检查输入的数据是否符合要求。

<input type="text" id="phone" onblur="validatePhone()">
<script>
    function validatePhone() {
        var phone = document.getElementById('phone').value;
        if (!/^d{10}$/.test(phone)) {
            alert("Please enter a valid 10-digit phone number.");
        }
    }
</script>

二、手动调用

1、手动调用校验函数

在某些场景下，开发者可能需要手动调用校验函数，而不是依赖事件触发。手动调用通常用于复杂的校验逻辑或需要在特定时间点执行的校验。例如，在表单提交前，手动调用所有字段的校验函数，确保数据的完整性和合法性。

<button onclick="manualValidation()">Validate</button>
<script>
    function manualValidation() {
        validateUsername();
        validateEmail();
        validatePhone();
        // Additional validation functions...
        alert("All validations passed.");
    }
</script>

2、结合事件触发与手动调用

在实际项目中，事件触发与手动调用往往结合使用，以实现更灵活和全面的校验机制。例如，在用户输入数据时进行即时校验，同时在表单提交前进行整体校验，确保所有字段都符合要求。

<form onsubmit="return overallValidation()">
    <input type="text" id="username" onchange="validateUsername()">
    <input type="text" id="email" onchange="validateEmail()">
    <input type="submit" value="Submit">
</form>
<script>
    function overallValidation() {
        validateUsername();
        validateEmail();
        // Additional validation functions...
        return true; // Return false to prevent form submission if any validation fails
    }
</script>

三、框架自动触发

1、使用JavaScript框架进行校验

现代JavaScript框架如React、Vue、Angular等，通常内置了丰富的表单校验功能，能够自动触发校验函数。通过使用这些框架，可以简化校验逻辑的编写，提高代码的可维护性。例如，在React中可以使用useState和useEffect钩子函数实现表单校验。

import React, { useState, useEffect } from 'react';
function FormComponent() {
    const [email, setEmail] = useState('');
    const [isValid, setIsValid] = useState(true);
    useEffect(() => {
        if (email && !email.includes('@')) {
            setIsValid(false);
        } else {
            setIsValid(true);
        }
    }, [email]);
    return (
        <form>
            <input
                type="text"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />
            {!isValid && <span>Please enter a valid email address.</span>}
            <button type="submit" disabled={!isValid}>Submit</button>
        </form>
    );
}

2、框架中的校验库

许多框架提供了专门的校验库，如React的Formik和Yup，Vue的Vuelidate等。这些库提供了丰富的校验规则和功能，能够简化校验逻辑的编写，并自动触发校验函数。例如，使用Formik和Yup可以轻松实现表单校验。

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object({
    email: Yup.string().email('Invalid email address').required('Required'),
    password: Yup.string().min(8, 'Password must be at least 8 characters long').required('Required'),
});
function SignupForm() {
    return (
        <Formik
            initialValues={{ email: '', password: '' }}
            validationSchema={validationSchema}
            onSubmit={(values) => {
                console.log(values);
            }}
        >
            <Form>
                <Field name="email" type="email" />
                <ErrorMessage name="email" />
                <Field name="password" type="password" />
                <ErrorMessage name="password" />
                <button type="submit">Submit</button>
            </Form>
        </Formik>
    );
}

四、总结

JavaScript校验的触发方式多种多样，主要包括事件触发、手动调用和框架自动触发。事件触发是最常见的方式，通过绑定在表单元素的相关事件上，实现实时校验。手动调用则适用于复杂的校验逻辑或特定时间点的校验。框架自动触发利用现代JavaScript框架的内置功能和校验库，能够简化校验逻辑的编写，提高代码的可维护性。无论采用哪种方式，都需要根据具体场景和需求，选择合适的校验方式，以确保数据的合法性和完整性。