前端表单验证策略：别让用户输入垃圾数据！

优质文章学习记录

— 8 min read

前端表单验证策略：别让用户输入垃圾数据！

毒舌时刻

表单验证？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便加个required属性就能解决所有验证问题？别做梦了！到时候你会发现，用户输入的垃圾数据还是会被提交到服务器。

你以为用正则表达式就能验证所有输入？别天真了！正则表达式的复杂度能让你崩溃，维护起来比业务代码还麻烦。还有那些所谓的表单验证库，看起来高大上，用起来却各种问题。

为什么你需要这个

  1. 提高数据质量：良好的表单验证可以确保用户输入的数据符合要求，提高数据质量。
  2. 改善用户体验：实时的表单验证可以及时反馈用户输入的错误，改善用户体验。
  3. 减少服务器负担：在前端进行验证可以减少无效请求，减轻服务器负担。
  4. 提高安全性：表单验证可以防止恶意输入，提高应用的安全性。
  5. 符合业务规则：表单验证可以确保用户输入符合业务规则，减少业务错误。

反面教材

// 1. 仅使用HTML5验证 <form> <input type="email" required> <input type="password" required minlength="8"> <button type="submit">Submit</button> </form> // 2. 验证逻辑混乱 function validateForm() { const email = document.getElementById('email').value; const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirm-password').value; if (!email) { alert('Email is required'); return false; } if (!isValidEmail(email)) { alert('Invalid email'); return false; } if (!password) { alert('Password is required'); return false; } if (password.length < 8) { alert('Password must be at least 8 characters'); return false; } if (password !== confirmPassword) { alert('Passwords do not match'); return false; } return true; } // 3. 缺少实时验证 function handleSubmit(e) { e.preventDefault(); if (validateForm()) { // 提交表单 } } // 4. 验证错误提示不友好 <input type="email" required> <div>Please enter a valid email</div> // 5. 过度验证 function validatePassword(password) { if (password.length < 8) { return 'Password must be at least 8 characters'; } if (!/[A-Z]/.test(password)) { return 'Password must contain at least one uppercase letter'; } if (!/[a-z]/.test(password)) { return 'Password must contain at least one lowercase letter'; } if (!/[0-9]/.test(password)) { return 'Password must contain at least one number'; } if (!/[!@#$%^&*]/.test(password)) { return 'Password must contain at least one special character'; } return ''; }

问题：

  • 仅使用HTML5验证，无法处理复杂的验证逻辑
  • 验证逻辑混乱，难以维护
  • 缺少实时验证，用户体验差
  • 验证错误提示不友好，影响用户体验
  • 过度验证，增加用户负担

正确的做法

基本验证策略

// 1. 实时验证 function setupRealTimeValidation() { const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirm-password'); emailInput.addEventListener('input', validateEmail); passwordInput.addEventListener('input', validatePassword); confirmPasswordInput.addEventListener('input', validateConfirmPassword); } function validateEmail() { const email = this.value; const errorElement = this.nextElementSibling; if (!email) { errorElement.textContent = 'Email is required'; this.classList.add('error'); } else if (!isValidEmail(email)) { errorElement.textContent = 'Invalid email format'; this.classList.add('error'); } else { errorElement.textContent = ''; this.classList.remove('error'); } } function validatePassword() { const password = this.value; const errorElement = this.nextElementSibling; if (!password) { errorElement.textContent = 'Password is required'; this.classList.add('error'); } else if (password.length < 8) { errorElement.textContent = 'Password must be at least 8 characters'; this.classList.add('error'); } else { errorElement.textContent = ''; this.classList.remove('error'); } } function validateConfirmPassword() { const confirmPassword = this.value; const password = document.getElementById('password').value; const errorElement = this.nextElementSibling; if (!confirmPassword) { errorElement.textContent = 'Please confirm your password'; this.classList.add('error'); } else if (confirmPassword !== password) { errorElement.textContent = 'Passwords do not match'; this.classList.add('error'); } else { errorElement.textContent = ''; this.classList.remove('error'); } } // 2. 表单提交验证 function handleSubmit(e) { e.preventDefault(); const isValid = validateForm(); if (isValid) { // 提交表单 } } function validateForm() { const email = document.getElementById('email').value; const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirm-password').value; let isValid = true; if (!email) { setError('email', 'Email is required'); isValid = false; } else if (!isValidEmail(email)) { setError('email', 'Invalid email format'); isValid = false; } else { clearError('email'); } if (!password) { setError('password', 'Password is required'); isValid = false; } else if (password.length < 8) { setError('password', 'Password must be at least 8 characters'); isValid = false; } else { clearError('password'); } if (!confirmPassword) { setError('confirm-password', 'Please confirm your password'); isValid = false; } else if (confirmPassword !== password) { setError('confirm-password', 'Passwords do not match'); isValid = false; } else { clearError('confirm-password'); } return isValid; } function setError(fieldId, message) { const field = document.getElementById(fieldId); const errorElement = field.nextElementSibling; errorElement.textContent = message; field.classList.add('error'); } function clearError(fieldId) { const field = document.getElementById(fieldId); const errorElement = field.nextElementSibling; errorElement.textContent = ''; field.classList.remove('error'); }

使用表单验证库

// 1. 使用Yup // 安装 // npm install yup import * as Yup from 'yup'; const schema = Yup.object({ email: Yup.string() .email('Invalid email format') .required('Email is required'), password: Yup.string() .min(8, 'Password must be at least 8 characters') .required('Password is required'), confirmPassword: Yup.string() .oneOf([Yup.ref('password'), null], 'Passwords must match') .required('Please confirm your password') }); async function validateForm(data) { try { await schema.validate(data, { abortEarly: false }); return { isValid: true, errors: {} }; } catch (error) { const errors = {}; error.inner.forEach(err => { errors[err.path] = err.message; }); return { isValid: false, errors }; } } // 2. 使用Formik + Yup // 安装 // npm install 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 format') .required('Email is required'), password: Yup.string() .min(8, 'Password must be at least 8 characters') .required('Password is required'), confirmPassword: Yup.string() .oneOf([Yup.ref('password'), null], 'Passwords must match') .required('Please confirm your password') }); function LoginForm() { return ( <Formik initialValues={{ email: '', password: '', confirmPassword: '' }} validationSchema={validationSchema} onSubmit={(values) => { // 提交表单 console.log(values); }} > {({ errors, touched }) => ( <Form> <div> <label htmlFor="email">Email</label> <Field type="email" name="email" /> {errors.email && touched.email && ( <div className="error">{errors.email}</div> )} </div> <div> <label htmlFor="password">Password</label> <Field type="password" name="password" /> {errors.password && touched.password && ( <div className="error">{errors.password}</div> )} </div> <div> <label htmlFor="confirmPassword">Confirm Password</label> <Field type="password" name="confirmPassword" /> {errors.confirmPassword && touched.confirmPassword && ( <div className="error">{errors.confirmPassword}</div> )} </div> <button type="submit">Submit</button> </Form> )} </Formik> ); } // 3. 使用React Hook Form // 安装 // npm install react-hook-form import React from 'react'; import { useForm } from 'react-hook-form'; function LoginForm() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => { // 提交表单 console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <div> <label htmlFor="email">Email</label> <input type="email" {...register('email', { required: 'Email is required', pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email format' } })} /> {errors.email && <div className="error">{errors.email.message}</div>} </div> <div> <label htmlFor="password">Password</label> <input type="password" {...register('password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} /> {errors.password && <div className="error">{errors.password.message}</div>} </div> <div> <label htmlFor="confirmPassword">Confirm Password</label> <input type="password" {...register('confirmPassword', { required: 'Please confirm your password', validate: (value, formValues) => { return value === formValues.password || 'Passwords do not match'; } })} /> {errors.confirmPassword && <div className="error">{errors.confirmPassword.message}</div>} </div> <button type="submit">Submit</button> </form> ); }

最佳实践

// 1. 分层验证 // 前端验证：基本验证、实时反馈 // 后端验证：完整验证、安全检查 // 2. 验证规则配置化 const validationRules = { email: { required: 'Email is required', pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email format' } }, password: { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } } }; // 3. 自定义验证规则 function validateUsername(username) { if (!username) { return 'Username is required'; } if (username.length < 3) { return 'Username must be at least 3 characters'; } if (username.length > 20) { return 'Username must be at most 20 characters'; } if (!/^[a-zA-Z0-9_]+$/.test(username)) { return 'Username can only contain letters, numbers, and underscores'; } return ''; } // 4. 异步验证 async function validateEmail(email) { if (!email) { return 'Email is required'; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { return 'Invalid email format'; } // 检查邮箱是否已存在 const response = await fetch(`/api/check-email?email=${email}`); const data = await response.json(); if (data.exists) { return 'Email already exists'; } return ''; } // 5. 可访问性 function AccessibleForm() { return ( <form> <div> <label htmlFor="email">Email</label> <input type="email" aria-required="true" aria-invalid={errors.email ? 'true' : 'false'} aria-describedby={errors.email ? 'email-error' : undefined} /> {errors.email && ( <div className="error"> {errors.email} </div> )} </div> {/* 其他字段 */} </form> ); }

毒舌点评

表单验证确实很重要，但我见过太多开发者滥用这个特性，导致用户体验变得很差。

想象一下，当你为了验证用户输入，设置了过多的验证规则，结果导致用户无法正常提交表单，这真的值得吗？

还有那些过度使用表单验证库的开发者，为了使用某个库，而忽略了项目的实际需求，结果导致代码变得过于复杂。

所以，在进行表单验证时，一定要把握好度。不要为了验证而验证，要根据实际情况来决定验证策略。

当然，对于需要收集重要数据的表单来说，良好的表单验证是必要的。但对于简单的表单，过度的验证反而会增加用户负担。

最后，记住一句话：表单验证的目的是为了提高数据质量和用户体验，而不是为了炫技。如果你的表单验证策略导致用户体验变得更差，那你就失败了。

Read more

【笔记】Trae+Andrioid Studio+Kotlin开发安卓WebView应用

【笔记】Trae+Andrioid Studio+Kotlin开发安卓WebView应用

文章目录 * 简介 * 依赖 * 步骤 * AS(Andriod Studio)创建项目 * AS创建虚拟机 * TRAE CN 修改项目 * 新增按键捕获功能 * 新增WebView * WebView加载本地资源 * 在按键回调中向WebView注入JS代码 * 最终关键代码 * 吐槽 简介 使用Trae配合Andriod Studio开发一个内嵌WebView的安卓应用, 在WebView中加载本地资源, 在APP中捕获按键事件对WebView中的内容进行操作; 依赖 * Trae CN (https://www.trae.com.cn/) * Andriod Studio (https://developer.android.google.cn/studio?hl=zh-cn), 以下简称AS * 吃内存, 占用了我大约6GB内存 * 下载项目依赖和安卓虚拟机(约2GB)依赖网络 * 基础的编程知识 步骤 AS(
WebStorm对个人免费开放

WebStorm对个人免费开放

前端开发的普惠革命：JetBrains WebStorm 非商业免费政策深度解析 2024 年 10 月 24 日，正值程序员节来临之际，JetBrains 抛出重磅消息：旗下旗舰级前端开发 IDE WebStorm 正式对非商业用途用户全面免费开放。这一举措不仅延续了 RustRover 的免费许可模式，更标志着专业级 Web 开发工具向大众化普及迈出了关键一步，为全球千万前端开发者带来了实质性利好。 一、政策内核：清晰界定的免费边界与权益 1. 非商业用途的精准定义 JetBrains 在 Toolbox 订阅协议中明确划分了免费使用的适用场景，覆盖群体远超传统教育优惠范畴： * 核心免费场景：包括前端技术学习与技能提升、无商业收益的开源项目贡献、技术博客 / 视频教程等内容创作、个人兴趣导向的 Web 开发（如自制工具、创意 demo）。值得注意的是，即使内容创作通过广告产生间接收益，仍属于非商业范畴。 * 商业付费边界：任何直接或间接获取经济收益的开发活动均需付费，

ClawdBot入门指南：Web控制台Config→Models→Providers模型切换实操

ClawdBot入门指南：Web控制台Config→Models→Providers模型切换实操 1. 什么是ClawdBot？一个真正属于你的本地AI助手 ClawdBot不是另一个云端API调用工具，也不是需要反复注册、绑定手机号的SaaS服务。它是一个能完整运行在你自己的设备上的个人AI助手——从模型推理、对话管理到多渠道接入，全部离线可控。 它的后端核心由vLLM驱动，这意味着你能享受到接近商用级的推理速度和显存利用率，同时完全掌握数据主权。不需要上传任何聊天记录，不依赖外部服务器稳定性，也不用担心某天服务突然下线。你装好，它就在；你关机，它就停；你改配置，它立刻响应。 更关键的是，ClawdBot的设计哲学是「可理解、可调试、可演进」。它的配置不是藏在层层GUI背后的黑盒，而是以清晰结构化的JSON文件呈现；它的模型切换不靠神秘按钮，而是一次明确的路径导航：Config → Models → Providers；它的扩展不依赖插件市场，而是通过标准OpenAI兼容接口，轻松对接你本地部署的任意vLLM、Ollama或FastChat服务。 换句话说，ClawdBo
和智慧生活商城系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

和智慧生活商城系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

💡实话实说： C有自己的项目库存，不需要找别人拿货再加价。 摘要 随着信息技术的飞速发展和电子商务的普及，智慧生活商城系统逐渐成为现代商业运营的重要组成部分。传统的商城管理模式面临着效率低下、数据冗余、用户体验差等诸多问题，亟需通过信息化手段进行优化升级。智慧生活商城系统旨在整合线上线下资源，为用户提供便捷、高效的购物体验，同时为商家提供智能化的管理工具。该系统通过先进的信息管理系统，实现商品管理、订单处理、用户交互等核心功能的自动化与智能化，从而提升整体运营效率和服务质量。关键词：智慧生活商城、信息管理系统、电子商务、智能化、SpringBoot。 智慧生活商城系统采用SpringBoot作为后端框架，结合Vue.js前端技术和MySQL数据库，构建了一套高效、稳定、可扩展的全栈解决方案。SpringBoot提供了强大的后端支持，简化了开发流程，提高了系统的可维护性；Vue.js则以其响应式特性和组件化开发模式，为用户提供了流畅的交互体验；MySQL作为关系型数据库，确保了数据的安全性和一致性。系统功能涵盖用户管理、商品分类与展示、购物车与订单管理、支付集成以及数据分析等模