HTML5 required属性怎么用？
定义与工作原理
HTML5 required属性 是一项用于前端表单校验的基础能力，作用是在提交前标识输入字段必须填写。
工作原理 是浏览器端的原生约束校验。当一个输入字段带有 required，且内容为空时，浏览器会阻止表单提交并显示默认的错误提示，以确保用户提供必要的信息。
下面展示一个最简单的示例，演示如何将 required 应用于文本字段并让浏览器在提交时进行判断。
-<form id="demoName"><label for="name">姓名</label><input id="name" name="name" type="text" required><button type="submit">提交</button>
</form>重要点：使用 required 时，字段类型、输入格式等也会影响最终的校验结果，因此可以将 required 与其他属性（如 type、pattern、minlength）组合来实现更细粒度的控制。
与其他校验属性的关系
组合校验 时，required 用于必填性校验，type、pattern、minlength、maxlength 等用于格式或长度的约束。两者协同工作，提供更强的前端验证能力。
下面的片段展示了将 required 与其他约束一起使用的典型场景，确保邮箱字段不仅有值，而且符合邮箱格式要求。
-<form id="demoEmail"><label for="email">邮箱</label><input id="email" name="email" type="email" required pattern=".+@.+\..+"><button type="submit">提交</button>
</form>浏览器提示差异：不同浏览器对默认提示的呈现略有差异，因此在需要统一体验时，可以结合脚本给出自定义提示。
前端表单验证全解
原生校验能力
Constraint Validation API 提供了检查和获取表单控件有效性的机制，通过 HTMLFormElement.checkValidity()、HTMLInputElement.validity 等属性可以实现状况检测与自定义提示。
常用的方法包括 checkValidity()、reportValidity()，前者仅返回布尔值，后者在返回结果为 false 时会触发浏览器内置的错误提示，帮助用户发现问题。
const form = document.querySelector('#demoEmail');
form.addEventListener('submit', function(e) {if (!form.checkValidity()) {// 阻止提交并让浏览器显示默认错误信息e.preventDefault();form.reportValidity();}
});原生校验的优点：简单实现、无需额外依赖、对无障碍友好，适合快速兑现基本校验需求。
自定义验证策略
自定义错误信息 可以通过 setCustomValidity() 实现，便于针对业务规则给出更具体的提示。
下面示例展示了在用户输入前端不符合自定义规则时，如何设置自定义错误信息，并在提交时显示该信息。
const form = document.querySelector('#customForm');
const pwd = document.querySelector('#password');
const confirm = document.querySelector('#confirm');form.addEventListener('input', function() {if (pwd.value !== confirm.value) {confirm.setCustomValidity('两次输入的密码不一致');} else {confirm.setCustomValidity('');}
});注意清理自定义错误：在规则通过后，需调用 setCustomValidity('') 清理自定义信息，确保后续的原生校验能够正确通过。
实用示例：从简单字段到复杂表单
单字段示例
先从一个简单的单字段示例入手，了解 required 的基本用法与反馈方式。
以下示例演示一个必填的用户名框，提交时如果未填写将阻止提交并显示提示。
-<form id="singleField"><label for="username">用户名</label><input id="username" name="username" type="text" required minlength="3"><button type="submit">提交</button>
</form>要点：required 与 minlength 共同工作时，必须同时满足两者条件才能提交。
组合字段与自定义错误信息
在真实表单中，往往需要同时校验多字段并提供友好的错误信息。下面的示例展示了一个简单的账户注册场景，包含用户名、密码与确认密码，以及自定义错误信息。
-<form id="registerForm"><label for="user">用户名</label><input id="user" name="user" type="text" required minlength="4"><label for="pwd">密码</label><input id="pwd" name="pwd" type="password" required minlength="6"><label for="pwd2">确认密码</label><input id="pwd2" name="pwd2" type="password" required><button type="submit">注册</button>
</form>自定义密码匹配：通过 JavaScript 监听输入并在不匹配时使用 setCustomValidity 设置错误信息，匹配时清理该信息。
const form = document.querySelector('#registerForm');
const pwd = document.querySelector('#pwd');
const pwd2 = document.querySelector('#pwd2');form.addEventListener('input', function() {if (pwd.value && pwd.value !== pwd2.value) {pwd2.setCustomValidity('两次输入的密码不一致');} else {pwd2.setCustomValidity('');}
});提交前最终检查：结合原生校验与自定义校验信息，确保用户在提交前看到清晰且准确的错误描述，从而提升表单的成功率与用户体验。
