html5原生验证需组合使用:required仅校验非空(含空格),type="email"才触发邮箱格式校验;pattern须配title才显示自定义提示;minlength/maxlength对number类型无效,数字范围用min/max;移动端tel无格式校验,需pattern验手机号。

HTML5 原生验证规则怎么写?required、pattern 这些属性到底管什么
HTML5 内置验证不是“有就行”,而是靠组合触发——单用 required 只校验是否为空,不校验格式;加了 type="email" 才真正走邮箱语法校验逻辑。
-
required:空值拦截,但允许只输空格(需配合whitespace或 JS 二次清理) -
pattern必须配title,否则失败时提示是浏览器默认英文(如 “Please match the requested format”) -
minlength/maxlength对type="number"无效,它只管字符串长度;数字范围得用min/max - 移动端
type="tel"不做格式校验,只是调出数字键盘;真要验手机号,必须加pattern="^1\d{10}$"
示例:<input type="text" pattern="[a-zA-Z\u4e00-\u9fa5]{2,10}" title="请输入2-10位中英文" required> —— 注意中文 Unicode 范围不能写成 \u4E00-\u9FA5(大小写敏感),实测部分旧版 Safari 会失效。
Vue 项目里用 vuelidate 验证,required 和 helpers.withMessage 为什么总不生效
常见现象是表单提交没拦住,或错误信息始终显示默认文案。根本原因是验证器没真正“挂载”到响应式状态上——vuelidate v2+ 要求所有验证规则必须包裹在 defineValidators 或通过 useVuelidate 注入,裸写 { required } 不会自动监听变化。
- 必填验证写成
username: { required }没问题,但若字段初始值是''且未触发过输入,$error可能为false(lazy 验证默认行为) - 自定义提示必须用
helpers.withMessage(required, '用户名不能为空'),直接写required: '用户名不能为空'是无效的 -
numeric不等于type="number":它只校验字符串能否转成有效数字(如"123"✅,"12.3.4"❌),但不会拒绝用户输入字母(需配合 input 事件过滤)
关键点:const result = useVuelidate(validations, state) 中的 state 必须是 reactive 对象,用 ref 包裹普通对象会断掉响应链。
Laravel 的 required|string|max:255 规则链,哪些顺序会影响结果
规则执行是**从左到右短路判断**:一旦某条失败就停止后续,且错误信息取第一条失败规则的提示。所以 required|email 和 email|required 表现不同——前者空值报“必填”,后者空值直接进 email 校验,可能报“邮箱格式错误”这种误导信息。
-
nullable必须放最前:如nullable|integer|min:0,否则空值会先被integer拒绝,根本走不到nullable -
array和filled冲突:如果字段是数组但允许为空,用array|nullable;若要求“非空数组”,得用array|filled(filled会拒绝[]) - 上传文件验证如
mimes:jpg,png实际校验的是 MIME 类型,不是后缀名——用户改后缀骗不过服务端
示例:'price' => 'required|numeric|min:0.01|max:999999.99',这里 numeric 必须在 min/max 前,否则字符串 "12.34abc" 会先过 min(隐式转数字为 12.34),再被 numeric 拦下,但错误提示却是 min 的。
ThinkPHP 验证器里 between:20,50 报错说“参数错误”,到底是哪边漏了冒号还是括号
TP6/TP8 的规则字符串解析对空格和符号极其敏感:between:20,50 看似正确,但如果复制粘贴带全角逗号、或中间多了一个空格(如 between:20, 50),就会解析失败并静默跳过该规则,导致验证形同虚设。
- 数组写法更稳:
'age' => ['require', 'between' => [20, 50]],避免字符串解析歧义 -
in规则的值必须是字符串逗号分隔,如in:1,2,3,不能写in:[1,2,3]或in:"1,2,3" - 自定义方法如
checkName必须返回true或字符串错误信息,返回false或null会被当成“通过” -
scene场景验证不是开关,而是字段白名单——不在scene里的字段即使写了规则也不会执行
最容易忽略的点:TP 验证器默认不校验空字符串(''),只校验 null。如果前端传了空字符串又没配 require,它就直接放过——得加 regex:/./ 或用 notIn:[''] 补漏。










