JavaScript 如何做表单校验

用户在网页上填写信息时，偶尔会漏填手机号、密码太短，这时候网页要是直接把错误信息甩出来，比在后台慢慢检查要高效多了。表单校验的核心，就是用JavaScript在前端“盯”着用户的输入，在提交信息前就把错误拦住，既省时间又能减少无效请求。

先搞懂最基础的两类校验

不是所有校验都要写复杂代码，先分好两类，再对应处理，逻辑会特别清晰。

一类是“必填项不能空”，比如注册页的手机号、收货地址的联系电话，要是空着提交，肯定过不了。这就像去便利店买东西，结账时要是漏拿了付款码，根本没法完成支付，对应到代码里，就是先判断输入框的内容有没有被用户填上。

另一类是“内容要符合规则”，比如手机号得是11位数字、密码得有6位以上，这就像寄快递时，收件地址必须写清楚省市区，不能只写“XX路”，得有明确的格式要求。比如用户输入手机号时，要是只写了10位，就说明不符合规则，得提醒用户改。

用生活例子拆解基础校验逻辑

举个最常见的登录表单例子，里面有“账号输入框”和“密码输入框”，先从最基础的必填校验写起。

先看账号的必填校验：你去登录账号，总不能没填账号就点“登录”吧？对应JavaScript代码的逻辑，就是先拿到用户填的账号内容，判断它是不是空的——就像你出门买水，要是没带钱包（空钱包），肯定没法付钱。要是空的，就弹出提示“请填写账号”，不让提交；要是填了，再继续检查格式。

再看密码的规则校验：一般密码要求至少6位，就像你要凑够6个游戏币才能抓娃娃，少一个都不行。代码里就是判断密码的长度有没有达到6位，要是只有3位，就提示“密码不能少于6位”，得让用户补够。

这些步骤都不用复杂的工具，只要用JavaScript的简单判断就能实现，新手也能很快上手。

避免踩的小误区

很多人写校验时容易犯两个错，得提前留意。

第一个是“只做前端校验，忽略后端”。前端校验只是为了用户体验，不是最终防线。就像你寄快递时，快递员会先检查包装合不合规，但到了仓库，工作人员还会再核对一遍，防止有人蒙混过关。要是只靠前端，万一有人改了网页代码跳过校验，就会把错误数据传到后台，给后续处理添麻烦。

第二个是“提示语太模糊”。要是只说“输入错误”，用户根本不知道哪里错了，就像你到医院看病，医生只说“你不舒服”，却不说具体是头疼还是胃疼，没法对症下药。得说清楚问题：比如“手机号格式不对，请输入11位数字”，用户一看就知道要改什么，体验会好很多。

进阶小技巧：实时校验比提交再检查更友好

现在很多网页都是用户输完一个框就立刻检查，不用等提交，这就像你发朋友圈时，打错字会立刻标红提示，不用等发出去再删改。

比如用户输完手机号，刚把光标移走，JavaScript就自动检查：要是少了一位，立刻在输入框旁边标红提醒；要是输的是字母，也立刻提示“请输入数字”。这种实时校验的代码也不难，只要给输入框加个“失去焦点”的事件就行，不用等用户点提交，就能把问题拦住。

简单来说，JavaScript做表单校验，核心就是“先拦必填空项，再卡格式规则，用清晰提示帮用户改，再配合后端双重把关”，只要结合生活里的小事理解逻辑，写起来就没那么难。