如何通过JavaScript实现HTML input的无值required属性设置？

首先明确：HTML的布尔属性（比如required、checked）只要存在就会生效，不管它的属性值是空字符串还是'true'，浏览器都会触发对应的表单验证。但如果你想要在DOM结构里呈现为<input id="blablabla" required>这种无值的规范形式，或者确保功能完全符合预期，正确的操作方式如下：

推荐方法：直接操作DOM元素的布尔属性 #

这是最标准的方式，直接设置元素的required属性为布尔值true：

const input = document.getElementById('blablabla');
input.required = true;

执行后，DOM会渲染为<input id="blablabla" required>，完全符合你想要的效果，同时表单验证功能正常生效。

其他可行的设置方式 #

如果你想用setAttribute方法，也可以这样写：

// 设置为空字符串，DOM会显示为 <input required="">，功能同样生效
input.setAttribute('required', '');
// 部分现代浏览器支持直接设置属性不赋值，DOM显示为 <input required>
input.setAttribute('required');

关于你之前尝试的问题解释 #

• 你用input.setAttribute('required','true')得到的<input required='true'>其实功能是生效的，浏览器会识别到required属性存在，触发表单验证，只是DOM显示形式不是无值的而已。
• 你用input.required='true'时，因为赋值的是字符串，会被自动转换为布尔值true，同样能生效，但DOM会显示为required="true"。

总结：如果追求DOM的规范显示形式，优先用input.required = true；如果只需要功能生效，几种方式都可以，但布尔值赋值的方式更符合DOM操作的最佳实践。

内容的提问来源于stack exchange，提问作者user13137381