换个角度看.… 先说个较大白话：HTML里想让用户必须要填东西， 就往这一些标签后面直接塞required就行啦。别想太更多，直接copy粘贴。

一、required到底是干啥的？

当前这个属性是布尔属性 意思就是要么有要么没有，加了就算true，不管你写成required="false"还是required=""都一样会被当成必填，我们都曾是...。

白嫖。 注意：不是全部标签都能用，有些奇怪的自定义组件根本不认识当前这个属性。

1.1 支持 required 的常见元素

如果你用了不支持的比如

二、 最基础的写法

我给跪了。 下面给你一个最简洁的例子，复制粘贴就能跑：

    姓名:
    
    邮箱:
    
    喜炎热爱颜色:
    
        请选择
        红色
        蓝色
    
    提交

上面代码里各个//都有required, 浏览器一点提交按钮，它会弹出默认提示框：“请填写此字段”。 破防了... 这玩意儿不需要js也能跑。

三、不同 input 类型对 空 的定义也不一样

type=text：只要value是空字符串就算空。空格也算有值，所以“ ”会被觉得已填写，麻了...。

type=number：如果用户没输入任意数字， 那value为""；但如果输入了0，那就是符合法规值，不会报错，PTSD了...。

type=checkbox / radio：:c 嗐... hecked 必须要被选中才算通过否则阻止提交。

心情复杂。 type=file：:如果没有选文件， value也是空字符串，这时会弹出“请选择文件”。

a) 较小坑：默认选项要留空字符串

If you put something like `请选择...` 那么浏览器会把它当成有效值， 多损啊！ 就不会提示了。所以一定要写`value=""`才行。

四、 配合 JavaScript 自定义提示

// 监听 submit 事件
document.querySelector.addEventListener{
    var name = document.getElementById;
    if ){
        e.preventDefault; // 阻止提交
        alert;
        name.focus;
        return false;
    }
});

上面代码演示了怎么在提交前自己检查，然后弹出自定义对话框。注意这里用了`trim`把全空格也算作空。

五、 CSS :required 伪类来搞花样

:required 能帮你迅速给必填项加点样式，比如红色边框或者黄色背景：，说明…..

/* 必填项背景黄 */
input:required,
select:required,
textarea:required {
    background-color:#fff8dc;
}
/* 不符合验证时的红框 */
input:invalid,
select:invalid,
textarea:invalid {
    border:2px solid #ff4500;
}

b) :optional 伪类顺手写一下吧

/* 非必填项淡灰 */
input:optional,
select:optional,
textarea:optional {
    background-color:#fafafa;
}

六、兼容性注意事项

• Chrome/Edge/Firefox：接近全部支持 required，包括伪类和实时校验。
• Safari ：Safari 对 number+required 的校验有点延迟，有时候需要点两次才能弹窗。
• Android WebView："some old WebView" 甚至连 required 都不识别，只是普通属性而已。
• CCTV 浏览器 / 360 浏览器等国产内核："兼容模式下有可能忽略 required，但仍然会渲染 :required 样式。"
• #IE10 以下："根本不认识 required，只会当成普通属性忽略掉。"

b) 较小技巧：强较大制开启 HTML5 验证

`novalidate` 是 form 的一个属性， 如果你在

七、 一下

- 加了 `required` 就能让浏览器自动阻止空提交； - 不同 input 类型对“空”的判断各有差异，要记住数字类型能够是 0； - 想自定义提示的话，用 JS `preventDefault` + `alert` 或者更较高级的 UI 框； - 用 CSS `:required` / `:invalid` 能够做一点视觉效果，但别指望老 IE 能看见； - 移动端尤其要较小心 Safari 和 Android WebView 的兼容问题； - 最后再来看一句：**只要加了 required 就算成功**——除非你真实的很挑剔，要自己再写一堆代码去兜底。

本文纯属个人随手记录， 语法错误、排版杂乱乃正常现象，如有雷同纯属巧合， 观感极佳。 请勿用于正式项目。祝较大家写代码开心，一键通关 SEO 排名！