前端内容校验实战经验分享及常见坑点解析

先看效果，再看代码

兄弟们，今天咱们来聊聊内容校验。这玩意儿在前端开发中挺常见的，特别是在表单验证这块。直接上代码，你们感受一下：

function validateForm(form) {
    const errors = {};
    if (!form.name) {
        errors.name = "名字不能为空";
    }
    if (!form.email || !/^[^s@]+@[^s@]+.[^s@]+$/.test(form.email)) {
        errors.email = "邮箱格式不正确";
    }
    if (!form.password || form.password.length < 6) {
        errors.password = "密码至少需要6位";
    }
    return errors;
}

这个函数validateForm接收一个表单对象，然后对每个字段进行校验。如果某个字段不符合要求，就把它添加到errors对象里。最后返回这个errors对象。

实战场景：注册页面

咱们先从一个简单的注册页面开始吧。假设我们有一个表单，包含用户名、邮箱和密码三个字段。看看怎么用上面的函数来进行校验：

<form id="registerForm">
    <div>
        <label for="name">名字：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">注册</button>
</form>

<script>
    const registerForm = document.getElementById('registerForm');
    registerForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const formData = new FormData(registerForm);
        const formObject = {};
        formData.forEach((value, key) => {
            formObject[key] = value;
        });
        const errors = validateForm(formObject);
        if (Object.keys(errors).length > 0) {
            console.log("有错误", errors);
        } else {
            console.log("表单有效");
        }
    });
</script>

这里我们监听了表单的提交事件，阻止默认行为后，把表单数据转换成一个对象，然后调用validateForm函数进行校验。如果有错误，就在控制台打印出来；如果没有错误，就提示表单有效。

踩坑提醒：这三点一定注意

• 正则表达式别搞错： 邮箱的正则表达式很容易写错，一定要多测试几遍。我之前就因为少了个+号，导致很多邮箱都通不过验证。
• 边界情况要处理好： 比如用户输入了空格怎么办？或者输入了特殊字符怎么办？这些都要考虑进去。我之前就遇到过用户输入了全角空格，结果一直提示“名字不能为空”，折腾了半天才发现问题。
• 用户体验不能忽视： 校验失败时，最好能给用户明确的提示信息，告诉他们哪里出错了。别让用户自己去猜，这样很影响体验。我建议在每个输入框旁边加上错误提示，比如：

<div>
    <label for="name">名字：</label>
    <input type="text" id="name" name="name">
    <span id="nameError" style="color: red;"></span>
</div>

<script>
    const nameError = document.getElementById('nameError');
    // 在校验逻辑里加上错误提示
    if (!form.name) {
        errors.name = "名字不能为空";
        nameError.textContent = errors.name;
    } else {
        nameError.textContent = "";
    }
</script>

这样用户就能清楚地看到哪里出错了，修改起来也方便多了。

高级技巧：自定义校验规则

有时候，我们需要对某些字段进行更复杂的校验。比如，密码不仅要长度大于6，还要包含数字和字母。这时候，我们可以自定义校验规则。比如：

function validatePassword(password) {
    const hasNumber = /d/.test(password);
    const hasLetter = /[a-zA-Z]/.test(password);
    if (!hasNumber || !hasLetter) {
        return "密码必须包含数字和字母";
    }
    return null;
}

function validateForm(form) {
    const errors = {};
    if (!form.name) {
        errors.name = "名字不能为空";
    }
    if (!form.email || !/^[^s@]+@[^s@]+.[^s@]+$/.test(form.email)) {
        errors.email = "邮箱格式不正确";
    }
    const passwordError = validatePassword(form.password);
    if (passwordError) {
        errors.password = passwordError;
    }
    return errors;
}

我们在validateForm函数里调用了validatePassword函数，如果密码不符合要求，就返回相应的错误信息。这样，我们的校验逻辑就更加灵活了。

总结与展望

以上就是我对内容校验的一些经验和心得。其实内容校验还有很多高级的玩法，比如使用第三方库（如Yup、Joi等），或者结合React Hooks进行更复杂的校验。这些后续我会慢慢分享给大家。

希望我的分享对你有帮助，如果你有更好的实现方式或者有什么问题，欢迎在评论区交流。大家一起进步嘛！